<template>
    <div class="container">
        <el-dialog
            :title="title"
            :visible.sync="open"
            :close-on-click-modal="false"
            width="700px"
            height="700px"
            append-to-body
            @close="cancel"
        >
            <el-form :model="form" :rules="rules" ref="form" label-width="120px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="工具类型" prop="toolType">
                    <el-select v-model="form.toolType" style="width: 540px">
                        <el-option
                            v-for="item in this.toolTypes"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue * 1"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="工具描述" prop="toolDesc">
                    <el-input type="textarea" :rows="3" v-model="form.toolDesc"></el-input>
                </el-form-item>
                <el-form-item label="交付方式" prop="deliverType">
                    <el-radio-group v-model="form.deliverType">
                        <el-radio label="License">License</el-radio>
                        <el-radio label="SaaS">SaaS</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="软件包" prop="packagePath" v-if="form.deliverType == 'License'">
                    <el-input v-model="form.packagePath" v-show="false" :limit="1"></el-input>
                    <nonimage-upload
                        ref="packageUpload"
                        :limitRemark="'，文件请选用压缩包格式'"
                        :limit="1"
                        @setImgPath="setPackagePath"
                        imageType="zip|rar"
                    />
                </el-form-item>
                <el-form-item label="安装手册" prop="installDocPath" v-if="form.deliverType == 'License'">
                    <el-input v-model="form.installDocPath" v-show="false" :limit="1"></el-input>
                    <nonimage-upload
                        ref="installDocUpload"
                        :limitRemark="'，文件请选用pdf|doc|docx|txt格式'"
                        :limit="1"
                        @setImgPath="setInstallDocPath"
                        imageType="pdf|doc|docx|txt"
                    />
                </el-form-item>

                <el-form-item label="用户使用手册" prop="guidePath" v-if="form.deliverType == 'License'">
                    <el-input v-model="form.guidePath" v-show="false" :limit="1"></el-input>
                    <nonimage-upload
                        ref="guideDocUpload"
                        :limitRemark="'，文件请选用pdf|doc|docx|txt格式'"
                        :limit="1"
                        @setImgPath="setGuideDocPath"
                        imageType="pdf|doc|docx|txt"
                    />
                </el-form-item>

                <el-form-item label="产品视频" prop="vedioPath" v-if="form.deliverType == 'License'">
                    <el-input v-model="form.vedioPath" v-show="false" :limit="1"></el-input>
                    <nonimage-upload
                        ref="vedioUpload"
                        :limitRemark="'，文件请选用mp4格式'"
                        :limit="1"
                        @setImgPath="setVedioDocPath"
                        imageType="mp4"
                    />
                </el-form-item>
                <el-form-item label="工具地址" prop="toolUrl" v-if="form.deliverType == 'SaaS'">
                    <el-input v-model="form.toolUrl"></el-input>
                </el-form-item>
                <el-form-item label="用户名/密码" prop="remark" v-if="form.deliverType == 'SaaS'">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>

                <el-form-item label="支持上传源码" prop="isSourcecode" v-if="form.deliverType == 'SaaS'">
                    <el-radio-group v-model="form.isSourcecode">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="价格" prop="price">
                    <el-input v-model="form.price" style="width: 90%"></el-input>
                    元/月
                </el-form-item>
                <el-form-item label="按次价格" prop="priceTime" v-if="form.deliverType == 'SaaS'">
                    <el-input v-model="form.priceTime" style="width: 90%"></el-input>
                    元/次
                </el-form-item>
                <el-form-item label="操作系统" prop="os">
                    <el-input v-model="form.os"></el-input>
                </el-form-item>
                <el-form-item label="工具LOGO" prop="iconPath">
                    <el-input v-model="form.iconPath" v-show="false"></el-input>
                    <material-upload
                        :limit="1"
                        ref="iconUpload"
                        :file-tip="iconTip"
                        @setImgPath="setIconPath"
                    ></material-upload>
                </el-form-item>
                <el-form-item label="工具详情头图" prop="headPath">
                    <el-input v-model="form.headPath" v-show="false"></el-input>
                    <material-upload
                        :limit="1"
                        ref="headUpload"
                        :file-tip="headTip"
                        @setImgPath="setHeadPath"
                    ></material-upload>
                </el-form-item>
                <el-form-item label="工具详情图" prop="detailPath">
                    <el-input v-model="form.detailPath" v-show="false"></el-input>
                    <material-upload
                        :limit="6"
                        ref="detailUpload"
                        :file-tip="detailTip"
                        @setImgPath="setDetailPath"
                    ></material-upload>
                </el-form-item>

                <el-form-item label="主要功能">
                    <el-row v-for="(fun, index) in form.functionList" :key="index + 100">
                        <el-row style="margin-bottom: 17px">
                            <el-col :span="22">
                                <el-form-item :prop="'functionList[' + index + '].title'" :rules="titleRule">
                                    <el-input
                                        v-model="form.functionList[index].title"
                                        style="width: 95%"
                                        placeholder="功能标题"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button
                                    type="danger"
                                    icon="el-icon-remove-outline"
                                    @click="removeFun(index)"
                                ></el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22" style="margin-bottom: 20px">
                                <el-form-item :prop="'functionList[' + index + '].funDesc'" :rules="descRule">
                                    <el-input
                                        type="textarea"
                                        :rows="3"
                                        v-model="form.functionList[index].funDesc"
                                        placeholder="功能描述"
                                        style="width: 95%"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-row>
                    <el-row align="middle" style="text-align: center">
                        <el-col :span="22" style="width: 95%">
                            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addFun"></el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="技术亮点">
                    <el-row v-for="(high, index) in form.highLightList" :key="index + 200">
                        <el-row style="margin-bottom: 17px">
                            <el-col :span="22">
                                <el-form-item :prop="'highLightList[' + index + '].title'" :rules="titleRule">
                                    <el-input
                                        v-model="form.highLightList[index].title"
                                        style="width: 95%"
                                        placeholder="亮点标题"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button
                                    type="danger"
                                    icon="el-icon-remove-outline"
                                    @click="removeHighLight(index)"
                                ></el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22" style="margin-bottom: 20px">
                                <el-form-item :prop="'highLightList[' + index + '].funDesc'" :rules="descRule">
                                    <el-input
                                        type="textarea"
                                        :rows="3"
                                        v-model="form.highLightList[index].funDesc"
                                        placeholder="亮点描述"
                                        style="width: 95%"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-row>
                    <el-row align="middle" style="text-align: center">
                        <el-col :span="22" style="width: 95%">
                            <el-button
                                type="primary"
                                icon="el-icon-circle-plus-outline"
                                @click="addHighLight"
                            ></el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="定价描述" prop="priceDesc">
                    <el-input type="textarea" :rows="3" v-model="form.priceDesc"></el-input>
                </el-form-item>
                <el-form-item label="产品问答" prop="productQA">
                    <el-input type="textarea" :rows="3" v-model="form.productQA"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">{{ this.form.toolId ? '修改' : '新增' }}</el-button>
                    <el-button type="primary" @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getFunction } from '../../api/toolInfo/market'
import { getFileList } from '../../api/file/file'
import MaterialUpload from './MaterialUpload'
import { add, update } from '../../api/toolInfo/tool'
import NonimageUpload from './NonimageUpload'

export default {
    props: {
        toolTypes: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    name: 'ToolEdit',
    components: { NonimageUpload, MaterialUpload },
    data() {
        return {
            // 遮罩层
            loading: true,
            open: false,
            title: '修改工具信息',
            iconTip: '请上传图片格式，建议规格：宽高比200*150像素，大小不超过128K',
            headTip: '请上传图片格式，建议规格：宽高比400*300像素，大小不超过128K',
            detailTip: '请上传图片格式，建议规格：宽高比1000*500像素，大小不超过512K',
            form: {
                name: '',
                price: 0,
                priceTime: 0,
                toolType: 0,
                toolDesc: '',
                priceDesc: '',
                productQA: '',
                deliverType: 'License',
                isSourcecode: 0,
                toolUrl: '',
                remark: '',
                os: '',
                functionList: [{ title: '', funDesc: '' }],
                highLightList: [{ title: '', funDesc: '' }],
                iconFile: [],
                detailFile: [],
                headFile: [],
                packageFile: [],
                installDocFile: [],
                guideDocFile: [],
                mp4File: [],
                iconPath: '',
                headPath: '',
                detailPath: '',
                packagePath: '',
                installDocPath: '',
            },
            // 表单校验
            rules: {
                name: [{ required: true, message: '工具名称不能为空', trigger: 'blur' }],
                toolDesc: [{ required: true, message: '工具描述不能为空', trigger: 'blur' }],
                toolUrl: [{ required: true, message: '工具地址不能为空', trigger: 'blur' }],
                remark: [{ required: true, message: '账户密码不能为空', trigger: 'blur' }],
                toolType: [{ required: true, message: '工具类型不能为空', trigger: 'change' }],
                deliverType: [{ required: true, message: '交付方式不能为空', trigger: 'change' }],
                price: [{ required: true, message: '价格不能为空', trigger: 'blur' }],
                priceTime: [{ required: true, message: '价格不能为空', trigger: 'blur' }],
                iconPath: [{ required: true, message: '工具LOGO不能为空', trigger: 'change' }],
                headPath: [{ required: true, message: '工具详情头图不能为空', trigger: 'change' }],
                detailPath: [{ required: true, message: '工具详情图不能为空', trigger: 'change' }],
                packagePath: [{ required: true, message: '软件包不能为空', trigger: 'change' }],
            },
            titleRule: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
            descRule: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
            baseApi: process.env.VUE_APP_BASE_API,
        }
    },
    methods: {
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.toolId) {
                        this.form.priceTime = Number(this.form.priceTime)
                        update(this.form).then((response) => {
                            this.$notify({
                                title: '修改成功',
                                message: '',
                                align: 'center',
                                type: 'success',
                            })
                            this.open = false
                            this.reset()
                            this.$emit('refresh')
                        })
                    } else {
                        this.form.priceTime = Number(this.form.priceTime)
                        add(this.form).then((res) => {
                            this.$notify({
                                title: '新增',
                                message: '',
                                align: 'center',
                                type: 'success',
                            })
                            this.open = false
                            this.reset()
                            this.$emit('refresh')
                        })
                    }
                }
            })
        },
        cancel() {
            this.open = false
            this.resetForm('form')
            this.reset()
        },
        reset() {
            this.form.iconFile = []
            this.form.headFile = []
            this.form.detailFile = []
            this.form.functionList = []
            this.form.highLightList = []
            this.form.isSourcecode = 0
            this.$refs.iconUpload.reset()
            this.$refs.headUpload.reset()
            this.$refs.detailUpload.reset()
            if (this.form.deliverType == 'License') {
                this.$refs.packageUpload.reset()
                this.$refs.installDocUpload.reset()
                this.form.packageFile = []
                this.form.installDocFile = []
                this.form.mp4File = []
                this.form.installDocFile = []
                this.$refs.guideDocUpload.reset()
                this.$refs.vedioUpload.reset()
            }
        },
        setImgPath(value) {
            this.form.filePath = value
        },
        addFun() {
            this.form.functionList.push({
                title: '',
                funDesc: '',
            })
        },
        removeFun(index) {
            this.form.functionList.splice(index, 1)
        },
        addHighLight() {
            this.form.highLightList.push({
                title: '',
                funDesc: '',
            })
        },
        removeHighLight(index) {
            this.form.highLightList.splice(index, 1)
        },
        setIconPath(value) {
            this.form.iconPath = value
        },
        setHeadPath(value) {
            this.form.headPath = value
        },
        setDetailPath(value) {
            this.form.detailPath = value
        },
        setPackagePath(value) {
            this.form.packagePath = value
        },
        setInstallDocPath(value) {
            this.form.installDocPath = value
        },
        // 用户手册+mp4
        setGuideDocPath(value) {
            this.form.guidePath = value
        },
        setVedioDocPath(value) {
            this.form.vedioPath = value
        },

        openDialog(tool) {
            this.form.toolId = tool.toolId
            this.form.name = tool.name
            this.form.price = tool.price
            this.form.toolType = tool.toolType
            this.form.toolDesc = tool.toolDesc
            this.form.productQA = tool.productQA
            this.form.priceDesc = tool.priceDesc
            this.form.deliverType = tool.deliverType
            this.form.isSourcecode = tool.isSourcecode  || 0
            this.form.toolUrl = tool.toolUrl
            this.form.remark = tool.remark
            this.form.priceTime= tool.priceTime

            this.form.os = tool.os
            this.form.iconFile = []
            this.form.headFile = []
            this.form.detailFile = []
            this.form.functionList = []
            this.form.highLightList = []
            this.form.instalDocFile = []
            this.open = true
            if (tool.toolId) {
                this.title = '修改工具'
                getFunction(tool.toolId).then((response) => {
                    if (response.data) {
                        let funcs = response.data
                        this.form.functionList = funcs.filter(function (item) {
                            return item.funType == 0
                        })
                        this.form.highLightList = funcs.filter(function (item) {
                            return item.funType == 1
                        })
                    }
                })
                getFileList('tool', tool.toolId).then((response) => {
                    if (response.data) {
                        let fileList = response.data
                        this.form.iconFile = fileList.filter(function (item) {
                            return item.fileType == 'icon'
                        })
                        this.form.headFile = fileList.filter(function (item) {
                            return item.fileType == 'head'
                        })
                        this.form.detailFile = fileList.filter(function (item) {
                            return item.fileType == 'detail'
                        })
                        this.form.packageFile = fileList.filter(function (item) {
                            return item.fileType == 'package'
                        })
                        this.form.installDocFile = fileList.filter(function (item) {
                            return item.fileType == 'instructionManual'
                        })
                        this.form.guideDocFile = fileList.filter(function (item) {
                            return item.fileType == 'userGuide'
                        })
                        this.form.mp4File = fileList.filter(function (item) {
                            return item.fileType == 'vedio'
                        })
                        if (this.form.iconFile.length > 0) {
                            let iconFile = [
                                {
                                    name: 'LOGO',
                                    url: this.baseApi + this.form.iconFile[0].filePath,
                                    filePath: this.form.iconFile[0].filePath,
                                },
                            ]
                            this.$refs.iconUpload.setFileList(iconFile)
                        }
                        if (this.form.headFile.length > 0) {
                            let headFile = [
                                {
                                    name: '头图',
                                    url: this.baseApi + this.form.headFile[0].filePath,
                                    filePath: this.form.headFile[0].filePath,
                                },
                            ]
                            this.$refs.headUpload.setFileList(headFile)
                        }
                        if (this.form.detailFile.length > 0) {
                            let detailFile = []
                            for (let index in this.form.detailFile) {
                                detailFile.push({
                                    name: '详细',
                                    url: this.baseApi + this.form.detailFile[index].filePath,
                                    filePath: this.form.detailFile[index].filePath,
                                })
                            }
                            this.$refs.detailUpload.setFileList(detailFile)
                        }
                        if (this.form.packageFile.length > 0) {
                            let packageFile = [
                                {
                                    name: '软件包',
                                    url: this.form.packageFile[0].fileUrl,
                                    filePath: this.form.packageFile[0].filePath,
                                },
                            ]
                            this.$refs.packageUpload.setToolFileList(packageFile)
                        }
                        if (this.form.installDocFile.length > 0) {
                            let installDocFile = [
                                {
                                    name: '安装手册',
                                    url: this.form.installDocFile[0].fileUrl,
                                    filePath: this.form.installDocFile[0].filePath,
                                },
                            ]
                            this.$refs.installDocUpload.setInstallDocFileList(installDocFile)
                        }
                        // 用户使用手册
                        if (this.form.guideDocFile.length > 0) {
                            let guideDocFile = [
                                {
                                    name: '用户使用手册',
                                    url: this.form.guideDocFile[0].fileUrl,
                                    filePath: this.form.guideDocFile[0].filePath,
                                },
                            ]
                            this.$refs.guideDocUpload.setInstallDocFileList(guideDocFile)
                        }
                        if (this.form.mp4File.length > 0) {
                            let mp4File = [
                                {
                                    name: '产品视频',
                                    url: this.form.mp4File[0].fileUrl,
                                    filePath: this.form.mp4File[0].filePath,
                                },
                            ]
                            this.$refs.vedioUpload.setInstallDocFileList(mp4File)
                        }
                    }
                })
            } else{
                this.title = '新增工具'
            }
        },
    },
    created() {
        // this.getDicts("sys_tool_type").then(response => {
        //   this.toolTypes = response.data;
        // })
    },
    computed: {},
}
</script>

<style scoped>
</style>
