<template>
    <div class="height_100">
    <el-container>
        <el-header>
            <el-button size="small" type="primary" @click="handleManage">自定义栏位管理</el-button>
        </el-header>
        <el-container style=" height:calc(100% - 60px)">
            <el-aside class="height_100" style="padding:10px" width="450px">
                <div v-loading="loading">
                    <el-form :model="form"> 
                        <el-form-item label="选择需要关联的标引与分类">
                            <div style="margin-top:50px">
                                <span>栏位：</span>
                                <span>
                                    <el-select v-model="customFieldId" @change="changeCustomField"  placeholder="请选择">
                                        <el-option
                                        v-for="item in customField"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.keyValue">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div style="margin-top:20px" v-if="customFieldId">
                                <template v-if="choseField.type === 0 || choseField.type === 2">
                                    <el-input v-model="choseField.fieldValue" placeholder="请输入内容" size="small" @change="changeValue"></el-input>
                                </template>
                                <template v-if="choseField.type === 1">
                                    <el-date-picker v-model="choseField.fieldValue"  value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期" style="width: 100%;" @change="changeValue"></el-date-picker>
                                </template>
                                <!-- <template v-if="choseField.type === 3">
                                    <el-select v-model="form.json.field[choseField.id].value" size="small" placeholder="请选择" class="width_100">
                                        <el-option v-for="option in choseField.options" :key="option.name" :value="option.id" :label="option.name"></el-option>
                                    </el-select>
                                </template> -->
                                <template v-if="choseField.type === 4">
                                    <el-radio-group v-model="choseField.fieldValue">
                                        <el-radio v-for="option in choseField.options" :key="option.name" :label="option.id" @input="changeValue(option.id,option)">{{ option.name }}</el-radio>
                                    </el-radio-group>
                                </template>
                                <template v-if="choseField.type === 5">
                                    <el-checkbox-group v-model="choseField.fieldValue" >
                                        <el-checkbox v-for="option in choseField.options" :key="option.name" :label="option.id" @change="changeValue(option.id,option)">{{ option.name }}</el-checkbox>
                                    </el-checkbox-group>
                                </template>
                                <template v-if="choseField.type === 6">
                                    <el-tree
                                        :ref="choseField.id"
                                        :data="choseField.options"
                                        node-key="id"
                                        :props="treeProp"
                                        :expand-on-click-node="false"
                                        :default-expand-all="true"
                                    >
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <el-checkbox-group v-model="choseField.fieldValue" >
                                            <el-checkbox :label="data.id" @change="changeValue(data.id,data)">{{ data.name }}</el-checkbox>
                                        </el-checkbox-group>
                                    </span>
                                    </el-tree>
                                </template>
                            </div>
                            <div v-if="assoImportTaskFieldVOS.length>0">
                                <el-tag v-for="(item,index) in assoImportTaskFieldVOS" :key="item.fieldValueId">{{ item.fieldName }} = {{ item.fieldValueStr }} <span><i @click="del(index,item)" class="el-icon-error"></i></span></el-tag>
                            </div>
                        </el-form-item>
                        <el-form-item label="数据来源：" v-if="form.type == 1">
                            <select style="width:300px;border:0;outline:none" name="" id="" v-model="form.sourceId">
                            <option value="">请选择数据来源</option>
                            <option v-for="item in ExcelConfig" :key="item.name" :value="item.id">{{item.name}}</option>
                            </select>
                            <el-divider ></el-divider>
                        </el-form-item>

                        <!-- <template v-if="form.type != 1">
                            <div>
                                <el-form-item label="是否更新" prop="ifUpdate">
                                    <el-switch v-model="form.ifUpdate" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949">  </el-switch>
                                </el-form-item>
                                <template>
                                    <div>
                                        <el-form-item label="更新间隔" prop="dateType">
                                            <el-select v-model="form.dateType" @change="getDateType" clearable placeholder="请选择更新时间间隔" style="margin-right: 20px;">
                                            <el-option v-for="item in $constants.updateCycle"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="选择更新具体时间" v-if="form.dateType" >
                                            <myTimeChoose :type="form.dateType" @value="handleData" :cron="form.crons" style="width:300px"></myTimeChoose>
                                        </el-form-item>
                                    </div>
                                </template>
                            </div>
                        </template> -->
                        <template v-if="['2','3'].indexOf(form.type) != -1">
                            <div>
                                <el-form-item label="导入内容">
                                    <el-select v-model="importContent"  multiple collapse-tags placeholder="请选择导入内容" >
                                        <el-option v-for="item in importContents"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="导入方式">
                                    <el-switch
                                        v-model="form.type"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        active-value="2"
                                        inactive-value="3"
                                        active-text="专利号"
                                        inactive-text="文件">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="专利号：" v-if="form.type == 2">
                                    <el-input type="textarea" v-model="form.searchCondition" placeholder="请输入专利号（多个专利号同时添加中间请用符号“，”隔开）"></el-input>
                                </el-form-item> 
                            </div>
                        </template>
                        
                        <el-form-item label="选择需要上传的文件" v-if="form.type != 2" style="height: 230px;">
                            <myUpload @on-change="onChange" :autoUpload="true"></myUpload>
                        </el-form-item>
                    </el-form>
                    <el-button v-if="form.type !=1" type="primary" size="small" @click="handleConfirm" style="float:right;width:80px" > 导入</el-button>
                </div>
            </el-aside>
            <el-main style="padding: 0 20px !important;" >
                <systemTask ref="systemTask" :importToId="form.importToId"></systemTask>
            </el-main>
        </el-container>
    </el-container>
    <Field-Drawer ref="FieldDrawer" @close="closeFieldDrawer"></Field-Drawer>

  </div>
</template>

<script>
import mixins from '../mixins/index'
export default {
    mixins:[mixins],
  data() {
    return {
      
      loading:false,
    }
  },
  computed: {
   
  },
  mounted() {
  },
  methods: {

    onChange(file, fileList) {
        if(file.guid){
            this.form.fileGuid = file.guid
            this.handleConfirm()
        }
    },
    handleConfirm() {
        if(this.form.type == 1){
            if (!this.form.fileGuid) {
                this.$message.error('请选择文件')
                return false
            }
            if (!this.form.sourceId) {
                this.$message.error('请选择数据类型')
                return false
            }
        }else{
           
            if(this.form.type == 2){
                if(!this.form.searchCondition){
                    this.$message.error('请输入专利号')
                    return false
                }
            }else if(this.form.type == 3){
                if (!this.form.fileGuid) {
                    this.$message.error('请上传文件')
                    return false
                }
            }
            var importContent = []
            this.importContents.forEach(item => {
                var index = this.importContent.indexOf(item.value)
                if(index != -1){
                    importContent.push(1)
                }else{
                    importContent.push(0)
                }
            });
            this.form.importContent = Number(importContent.join(''))
        }
        this.form.assoImportTaskFieldVOS = this.assoImportTaskFieldVOS
        // console.log(this.form)
        this.addImportTask(this.form)
      
    }
  },
}
</script>

<style lang="scss">
.el-divider--horizontal{
  margin:0
}
</style>