<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 14:10:56
-->
<template>
  <dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="myValue"
    :btnDisabled="btnDisabled">
    <ul class="edit-title-list" v-if="titleList.length > 0">
      <li v-for="(item, index) in titleList" @click="handleTitleSelct(item, index)" :key="index"
        :class="{ active: index == tn }">{{
            item.nodename
        }}</li>
    </ul>
    <div class="sqywgz-edit">
      <ul class="sqywgz-edit-left">
        <li v-for="(item, index) in leftList" :key="index" :class="{ active: index == n }" @click="hanldeItem(index)">{{
            item.name
        }}</li>
      </ul>
      <div class="sqywgz-edit-right">
        <el-form :model="ruleForm" v-show="n == 0" :rules="rules" label-width="135px" ref="ruleForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="权利类型编码">
                <el-input v-model="ruleForm.qllxbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权利类型名称">
                <el-input v-model="ruleForm.qllxmc" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请分类">
                <el-select v-model="ruleForm.sqfl" disabled placeholder="请选择" class="width100">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记类型编码">
                <el-input v-model="ruleForm.djlxbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记类型名称">
                <el-input v-model="ruleForm.djlxmc" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发起业务单元类型">
                <el-select v-model="ruleForm.fqywdylx" disabled placeholder="请选择" class="width100">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记业务编码">
                <el-input v-model="ruleForm.djywbm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="登记业务名称">
                <el-input v-model="ruleForm.djywmc" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否启用" prop="enabled">
                <el-radio-group v-model="ruleForm.enabled">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="业务流程ID" prop="flowid">
                <el-input v-model="ruleForm.flowid"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记情形及材料">
                <el-input v-model="ruleForm.djqxcl" placeholder="仅支持execl文件导入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-upload ref="upload" :action="imgUploadUrl" :limit="1" accept=".xls, .xlsx" :show-file-list="false"
                :disabled='requested' :file-list="fileList" :before-upload="uploadRecord" :on-success="handleSuccess">
                <el-button type="primary" icon="el-icon-upload" :loading="requested">上传材料</el-button>
              </el-upload>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记原因设置" prop="sfqydjyymb">
                <el-radio-group v-model="ruleForm.sfqydjyymb">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="登记原因模板" prop="djyy">
                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.djyy">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <djqxsd v-show="n == 1" :ruleForm="ruleForm" :djqx="subData.djqx" @updateValue="getDjqxValue" />
        <clgzsd v-show="n == 2" :ruleForm="ruleForm" :clzt="subData.clxx" :djqx="subData.djqx"
          @updateValue="getClgzValue" />
        <dyztsd :ruleForm="ruleForm" :subData="subData" v-show="n == 3" @updateValue="getDyztsdValue" />
      </div>
    </div>
  </dialogBox>
</template>
<script>
  import { uploadUrl } from '@/api/file'
  import djqxsd from './djqxsd.vue'
  import clgzsd from './clgzsd.vue'
  import dyztsd from './dyztsd.vue'
  import { getSqdjywDetail, saveSqdjyw } from '@/api/sysSqdjyw'
  export default {
    components: {
      djqxsd,
      clgzsd,
      dyztsd
    },
    props: {
      value: { type: Boolean, default: false },
      detailList: {
        type: Array, default: []
      },
      bsmSqyw: {
        type: String, default: ''
      },
    },
    watch: {
      value (val) {
        this.myValue = val
      },
      detailList: {
        handler: function (newValue) {
          if (newValue.length == 0) {
            this.getSqdjywDetail(this.bsmSqyw)
          } else {
            this.titleList = newValue
            this.n = 0
            this.tn = 0
            this.getSqdjywDetail(newValue[0].bsmSqyw)
          }
        },
        deep: true
      }
    },
    data () {
      return {
        djqx: [],
        clzt: [],
        myValue: this.value,
        btnDisabled: false,
        tn: 0,
        titleList: [],
        imgUploadUrl: uploadUrl(),
        n: 0,
        leftList: [
          {
            name: '业务详情',
            select: true
          },
          {
            name: '登记情形设定'
          },
          {
            name: '材料规则设定'
          },
          {
            name: '单元状态设定'
          }
        ],
        ruleForm: {
          qllxbm: '',
          qllxmc: '',
          sqfl: '',
          djlxbm: '',
          djlxmc: '',
          fqywdylx: '',
          djywbm: '',
          djywmc: '',
          enabled: '1',
          flowid: '',
          flowparams: '',
          djqxcl: '',
          sfqydjyymb: '1',
          djyy: ''
        },
        requested: false,
        fileList: [],
        options: [],
        rules: {
          sfqy: [
            { required: true, message: '请选择是否启用', trigger: 'change' },
          ],
          ywlc: [
            { required: true, message: '请输入业务流程ID', trigger: 'blur' },
          ],
          djqxcl: [
            { required: true, message: '请选择登记情形及材料', trigger: 'blur' },
          ],
          djyysz: [
            { required: true, message: '请选择登记原因设置', trigger: 'change' },
          ],
          djyymb: [
            { required: true, message: '请输入登记原因模板', trigger: 'blur' },
          ],
        },
        // 表单提交
        subData: {}
      };
    },
    methods: {
      /**
       * @description: getSqdjywDetail
       * @param {*} bsmSqyw
       * @author: renchao
       */
      getSqdjywDetail (bsmSqyw) {
        getSqdjywDetail(bsmSqyw).then(res => {
          this.subData = res.result
          let { ywDetail } = res.result
          this.ruleForm = ywDetail
        })
      },
      /**
       * @description: handleTitleSelct
       * @param {*} obj
       * @param {*} index
       * @author: renchao
       */
      handleTitleSelct (obj, index) {
        this.n = 0
        this.tn = index
        this.getSqdjywDetail(obj.bsmSqyw)
      },
      /**
       * @description: getDjqxValue
       * @param {*} val
       * @author: renchao
       */
      getDjqxValue (val) {
        if (!_.isEqual(val.djqx, this.subData.djqx)) {
          this.subData.djqx = val.djqx
          this.btnDisabled = val.btnDisabled
        }
      },
      /**
       * @description: getClgzValue
       * @param {*} val
       * @author: renchao
       */
      getClgzValue (val) {
        if (!_.isEqual(val, this.subData.clxx)) {
          this.subData.clxx = val
        }
      },
      // 单元状态设定
      /**
       * @description: 单元状态设定
       * @param {*} val
       * @author: renchao
       */
      getDyztsdValue (val) {
        if (!_.isEqual(val.sxql, this.subData.sxql)) {
          this.subData.sxql = val.sxql
        }
        if (!_.isEqual(val.sxzt, this.subData.sxzt)) {
          this.subData.sxzt = val.sxzt
        }
      },
      /**
       * @description: submitForm
       * @author: renchao
       */
      submitForm () {
        this.$refs['ruleForm'].validate(async (valid) => {
          let that = this
          if (valid) {
            this.subData.ywDetail = this.ruleForm
            saveSqdjyw(this.subData).then(res => {
              if (res.code == 200) {
                that.$message({
                  message: '修改成功',
                  type: 'success'
                })
                // that.$emit('input', false)
              }
            })
          } else {
            this.$message('请检查表单完整性')
            return false
          }
        })
      },
      /**
       * @description: closeDialog
       * @author: renchao
       */
      closeDialog () {
        this.$emit('input', false)
      },
      /**
       * @description: hanldeItem
       * @param {*} index
       * @author: renchao
       */
      hanldeItem (index) {
        this.n = index
      },
      /**
       * @description: uploadRecord
       * @param {*} file
       * @author: renchao
       */
      uploadRecord (file) {
        this.requested = true
        this.files = file;
        const extension = file.name.split('.')[1] === 'xls'
        const extension2 = file.name.split('.')[1] === 'xlsx'
        const isLt5M = file.size / 1024 / 1024 < 5
        if (!extension && !extension2) {
          this.$message.warning('上传模板只能是 xls、xlsx格式!')
          this.requested = false
        }
        if (!isLt5M) {
          this.$message.warning('上传模板大小不能超过 5MB!')
          this.requested = false
        }
        return (extension || extension2) && isLt5M
      },
      /**
       * @description: handleSuccess
       * @param {*} res
       * @author: renchao
       */
      handleSuccess (res) {
        if (res.code === 200) {
          this.requested = false
          this.$message({
            message: '上传成功',
            type: 'success',
          })
        } else {
          this.loading = false
          this.$message.error(res.message)
        }
      }
    }
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";

  /deep/.el-radio {
    margin-right: 0;
  }

  /deep/.el-radio__label {
    padding-left: 2px;
  }

  .active {
    background: $light-blue !important;
    color: #fff;
  }

  .edit-title-list {
    @include flex;

    li {
      flex: 1;
      @include flex-center;
      border: 1px solid $borderColor;
      line-height: 36px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        @extend .active;
      }
    }
  }

  .sqywgz-edit {
    @include flex;
    width: 100%;
    height: 563px;

    &-left {
      width: 26px;

      li {
        @include flex-center;
        background-color: #e4e7ed;
        border-bottom-right-radius: 5px;
        padding: 15px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          @extend .active;
        }
      }

      li:not(:last-child) {
        margin-bottom: 10px;
      }
    }

    &-right {
      margin-left: 20px;
      flex: 1;
      width: 100%;
    }
  }
</style>