<template>
  <div class="">
    <el-dialog title="批量标引" :visible.sync="visible" width="500px" append-to-body destroy-on-close :before-close="close" top="10vh">
      <el-container class="patent-batch-index">
        <el-main class="patent-batch-index-main">
          <el-form>
            <el-form-item v-for="(field, index) in fieldList">
              <div slot="label">
                <span>{{index + 1}}. {{field.name}}</span>
              </div>
              <el-switch class="patent-batch-index-field-enabled" v-model="field.enabled"></el-switch>
              <div v-if="field.enabled" class="patent-batch-index-field-content">
                <template v-if="field.type === 0 || field.type === 2">
                  <el-input type="textarea" v-model="field.text" placeholder="请输入内容" size="small"></el-input>
                </template>
                <template v-if="field.type === 1">
                  <el-date-picker v-model="field.text" value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期" class="width_100"></el-date-picker>
                </template>
                <template v-if="field.type === 4">
                  <el-radio-group v-model="field.selected">
                    <div v-for="option in field.option">
                      <el-radio :label="option.id">{{ option.name }}</el-radio>
                    </div>
                  </el-radio-group>
                </template>
                <template v-if="field.type === 5">
                  <el-checkbox-group v-model="field.selected">
                    <div v-for="option in field.option">
                      <el-checkbox :label="option.id">{{ option.name }}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </template>
                <template v-if="field.type === 6">
                  <el-tree
                      @check-change="handleChange(field)"
                      :ref="field.id"
                      :data="field.option"
                      check-strictly
                      :default-checked-keys="field.selected"
                      show-checkbox
                      node-key="id"
                      :props="defaultProps"
                  ></el-tree>
                </template>
              </div>
            </el-form-item>
             
      <template v-if="product.isCategory == 1 && $permission('/workspace/product')">
        <el-form-item >
          <div slot="label">
            <span>{{ this.fieldList.length + 1 }}. {{ product.productName }}</span>
          </div>
          <el-switch style="float: right;margin-top: 10px;" v-model="product.enabled"></el-switch>
          <div v-if="product.enabled" class="patent-batch-index-field-content">
             <template >
            <div>
              <el-tree
                @check-change="changeCategory"
                ref="Category"
                :data="CategoryList"
                check-strictly
                :default-checked-keys="selectCategory"
                show-checkbox
                node-key="id"
                default-expand-all
                :props="{label:'structureName',value:'id'}"
            ></el-tree>
            </div>
          </template>
          </div>
         
        </el-form-item>
          </template>
          </el-form>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['params'],
  data() {
    return {
      btnLoading: false,
      visible: false,
      fieldList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      product:{},
      CategoryList:[],
      selectCategory:[],
      patentNoList:[]
    }
  },
  mounted() {
  },
  methods: {
    getList() {
      this.$api.getProjectCustomField({ projectId: this.params.projectId }).then(response => {
        this.fieldList = response.data
        this.fieldList.map(item => {
          this.$set(item, 'text', '')
          if (item.type === 4) {
            this.$set(item, 'selected', null)
          } else {
            this.$set(item, 'selected', [])
          }
        })
      })
    },
    //获取已选择的架构
    changeCategory(val,isSign){
      if(isSign){
        this.selectCategory.push(
          {
            structureId: val.id,
            productId: this.product.productId
          }
        )
      }else{
        var index = this.selectCategory.findIndex(item=>{
          return item.structureId == val.id
        })
        this.selectCategory.splice(index,1)
      }
    },
    //获取专题库详情
    async getProject(){
      await  this.$api.getProject({id:this.params.projectId}).then(response=>{
                if(response.code == 200){
                  if(response.data[0].isCategory){
                    this.product={
                      productId:response.data[0].productId,
                      productName:response.data[0].productName,
                      structureId:response.data[0].structureId,
                      isCategory:response.data[0].isCategory,
                      enabled:false
                    }
                    if(this.product.isCategory == 1){
                      this.getCategoryList()
                    }
                  }
                  
                }
              })
    },
    //获取架构详情
    getCategoryList(){
      var params = {
        productId: this.product.productId,
        structureId: this.product.structureId? this.product.structureId:0
      }
      this.$api.queryStructures(params).then(res => {
        if(res.code == 200){
          if(this.product.structureId){
            this.CategoryList = [res.data]
          }else{
            this.CategoryList = res.data.children
          }
        }
      })
    },
    open(patentNoList) {
      this.patentNoList = patentNoList
      this.visible = true
      this.getList()
      if(this.$permission('/workspace/product')){
        this.getProject()
      }
      
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
   async submit() {
      var a = false
      var b = false
      this.btnLoading = true
      if(this.selectCategory.length>0){
        var params = {
          projectId:this.params.projectId,
          patentNos: this.patentNoList,
          structureAndProductIds: this.selectCategory
        }
       await this.$api.addNewBatch(params).then(response=>{
          if(response.code == 200){
            a = true
          }
        })
      }else{
        a = true
      }
      let fieldList = JSON.parse(JSON.stringify(this.fieldList))
      fieldList.map(item => {
        if (item.type === 4) {
          item.selected = item.selected ? [item.selected] : []
        }
      })
      let data = {
        projectId: this.params.projectId,
        patentIds: this.params.selected,
        fieldList: fieldList
      }
      

     await this.$api.patentBatchIndex(data).then(response => {
        b = true
       
      }).catch(error => {
        this.btnLoading = false
      })
      this.$nextTick(()=>{
        if(a && b){
        this.$message.success('操作成功')
        this.btnLoading = false
        this.visible = false
        this.$emit('submit')
      }else if( a && !b){
        this.$message.success('产品标引成功，自定义字段标引失败')
        this.btnLoading = false
        this.visible = false
        this.$emit('submit')
      }else if( !a && b){
        this.$message.success('自定义字段标引成功，产品标引失败')
        this.btnLoading = false
        this.visible = false
        this.$emit('submit')
      }else{
        this.btnLoading = false
      }
      })
   
     
    },
    handleChange(field) {
      const keys = this.$refs[field.id][0].getCheckedKeys()
      field.selected = keys
    }
  }
}
</script>

<style lang="scss">
.patent-batch-index {
  .patent-batch-index-main {
    max-height: 600px;
    padding: 0 10px;
    .patent-batch-index-field-enabled {
      float: right;
      margin-top: 10px;
    }
    .patent-batch-index-field-content {
      margin-top: 40px;
      .el-radio, .el-checkbox {
        line-height: 30px;
      }
    }
  }
}
</style>