<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增业务类型' : '编辑业务类型'"
      :form="form" :rules='rules' @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>业务名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入业务名称" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:area_ids>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>填报区域：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" v-model="form.area_ids" multiple collapse-tags
              placeholder="请选择">
              <el-option v-for="item in list_areas" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:id_business_types_business_id_relation>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>业务类别：
          </div>
          <div class="xy-table-item-content">
            <el-button type="primary" style="margin-bottom:10px" size="small" @click="addRow">新增</el-button>
            <xy-table style="width:850px" :list="form.id_business_types_business_id_relation" :isPage="false" :height="350"
              :table-item="business_types_item">
              <template v-slot:name>
                <el-table-column align='left' label="类别名称" width="340">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入类别名称" style="width:100%" v-model="scope.row.name"></el-input>
                  </template>
                </el-table-column>
              </template>
              <template v-slot:area_id>
                <el-table-column align='left' label="所属区域" width="340">
                  <template slot-scope="scope">
                    <el-select style="width:100%"
                      v-model="scope.row.area_id" placeholder="请选择所属区域">
                      <el-option v-for="(item,index) in list_areas" :key="index" :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </template>
              <template v-slot:btns>
                <el-table-column align='center' label="操作" width="120" header-align="center">
                  <template slot-scope="scope">
                    <el-popconfirm style="margin:0 10px"
                      @confirm="delRow(scope.$index,scope.row.id)" title="确认删除该项业务类别?">
                      <el-button type="danger" size="small" slot="reference">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </template>
            </xy-table>
          </div>
        </div>
      </template>
      <template v-slot:id_business_datas_business_id_relation>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>业务填报数据：
          </div>
          <div class="xy-table-item-content">
            <el-button type="primary" style="margin-bottom:10px" size="small" @click="addDataRow">新增</el-button>
            <xy-table style="width:850px" :list="form.id_business_datas_business_id_relation" :isPage="false" :height="350"
              :table-item="business_datas_item">
              <template v-slot:name>
                <el-table-column align='left' label="填报数据名称" width="680">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入填报数据名称" style="width:100%" v-model="scope.row.name"></el-input>
                  </template>
                </el-table-column>
              </template>
              <!-- <template v-slot:sort>
                <el-table-column align='center' label="排序" width="100">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入排序" style="width:100%" v-model="scope.row.sort"></el-input>
                  </template>
                </el-table-column>
              </template> -->
              <template v-slot:btns>
                <el-table-column align='center' label="操作" width="120" header-align="center">
                  <template slot-scope="scope">
                    <el-popconfirm style="margin:0 10px"
                      @confirm="delDataRow(scope.$index,scope.row.id)" title="确认删除该项业务填报数据?">
                      <el-button type="danger" size="small" slot="reference">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </template>
            </xy-table>
          </div>
        </div>
      </template>


    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show,
    index,
    destroy
  } from "@/api/system/baseForm.js"
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        table_name: 'businesses',
        list_areas: [],
        // 业务类别子表
        business_types_item:[{
          type: 'index',
          width: 50,
        }, {
          prop: 'name',
          label: '类别名称',
          align: 'left',
          width: 620
        }, {
          prop: 'area_id',
          label: '所属区域',
          align: 'left',
          width: 620
        }],
        // 业务填报数据 子表
        business_datas_item:[{
          type: 'index',
          width: 50,
        }, {
          prop: 'name',
          label: '数据名称',
          align: 'left',
          width: 630
        }],
        form: {
          name: '',
          area_ids: [],
          id_business_types_business_id_relation:[],
          id_business_datas_business_id_relation:[]
        },
        rules: {
          name: [{
            required: true,
            message: '请输入业务名称'
          }],
          area_ids: [{
            required: true,
            message: '请选择填报区域'
          }]
        }
      }
    },
    created() {

    },
    methods: {
      async getAreaList() {
        const res = await index({
          page_size: 999,
          page: 1,
          table_name: 'areas',
          sort_type:'ASC',
          sort_name:'sort',
        })
        this.list_areas = res.data
      },
      addRow() {
        this.form.id_business_types_business_id_relation.push({
          name:'',
          area_id:''
        })
      },
      delRow(index,id) {
        if(id){
          destroy({
            id: id,
            table_name: 'business_types'
          }).then(response => {
            this.form.id_business_types_business_id_relation.splice(index, 1)
          }).catch(error => {
            console.log(error)
            reject(error)
          })
        }else{
          this.form.id_business_types_business_id_relation.splice(index, 1)
        }
      },
      addDataRow() {
        this.form.id_business_datas_business_id_relation.push({
          name:'',
          sort:0
        })
      },
      delDataRow(index,id) {
        if(id){
          destroy({
            id: id,
            table_name: 'business_datas'
          }).then(response => {
            this.form.id_business_datas_business_id_relation.splice(index, 1)
          }).catch(error => {
            console.log(error)
            reject(error)
          })
        }else{
          this.form.id_business_datas_business_id_relation.splice(index, 1)
        }
      },



      submit() {
        if (this.id) {
          this.form.id = this.id
        }
        if (this.type == 'add') {
          this.form.id = ''
        }
        console.log("this.form", this.form)

        // 判断 业务类型是否有 为空的数据
        if (this.form.id_business_types_business_id_relation.length > 0) {
          // 判断属性中是否为空
          for (var p of this.form.id_business_types_business_id_relation) {
            if (this.base.isNull(p.name)) {
              this.$message({
                type: 'warning',
                message: `业务类别名称不能为空`
              })
              return
            }
            if (this.base.isNull(p.area_id)) {
              this.$message({
                type: 'warning',
                message: `请选择业务类别所属区域`
              })
              return
            }
          }
        }

        // 判断 业务填报数据是否有 为空的数据
        if (this.form.id_business_datas_business_id_relation.length > 0) {
          // 判断属性中是否为空
          for (var p of this.form.id_business_datas_business_id_relation) {
            if (this.base.isNull(p.name)) {
              this.$message({
                type: 'warning',
                message: `业务填报数据名称不能为空`
              })
              return
            }
          }
        }

        // return
        save({
          table_name: this.table_name,
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.type === 'add' ? '新增成功' : '编辑成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
          table_name: this.table_name,
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.form.area_ids = res.area_ids ? res.area_ids : [],
          this.form.id_business_types_business_id_relation = res.id_business_types_business_id_relation?res.id_business_types_business_id_relation:[]
          if(res.id_business_datas_business_id_relation){
            this.form.id_business_datas_business_id_relation = res.id_business_datas_business_id_relation.sort((a, b) => parseInt(a.sort) - parseInt(b.sort))
          }
          // this.form.id_business_datas_business_id_relation = res.id_business_datas_business_id_relation?res.id_business_datas_business_id_relation:[]

        })
      },
    },
    watch: {
      isShow(newVal) {
         this.getAreaList()
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = "add"
          this.list_areas = []
          this.form = {
            name: '',
            area_ids: [],
            id_business_types_business_id_relation:[],
            id_business_datas_business_id_relation:[]
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  // ::v-deep .area_ids,
  // ::v-deep .name{
  //   flex-basis: 100%;
  // }
</style>
