<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2024-01-22 15:49:28
-->
<template>
  <div>
    <ul class="edit-title-list" v-if="djlxList.length > 0 ">
      <li v-for="(item, index) in djlxList" @click="handleTitleSelct(item, index)" :key="index"
        :class="{ active: index == tn }">
        {{ item.nodename }}
      </li>
    </ul>
    <div class="contentBox">
      <el-form :model="form" v-show="n == 0" label-width="135px" ref="ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请分类" v-if="form.sqdjyw">
              <el-select v-model="form.sqdjyw.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-col :span="8">
            <el-form-item label="登记业务编码" v-if="form.sqdjyw">
              <el-input v-model="form.sqdjyw.djywbm" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记业务名称" v-if="form.sqdjyw">
              <el-input v-model="form.sqdjyw.djywmc" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发起业务单元类型" v-if="form.sqdjyw">
              <el-select v-model="form.sqdjyw.sqywdylx" placeholder="请选择" class="width100">
                <el-option v-for="item in sqywdylx" :key="item.dcode" :label="item.dname" :value="item.dcode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用" prop="enabled" v-if="form.sqdjyw">
              <el-radio-group v-model="form.sqdjyw.enabled">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否效验土地确权" prop="enabled" v-if="form.sqdjyw">
              <el-radio-group v-model="form.sqdjyw.sfjytd">
                <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="8">
            <el-form-item label="业务流程ID" prop="flowid" v-if="form.sqdjyw">
              <el-input v-model="form.sqdjyw.flowid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="流程参数" prop="flowparams" v-if="form.sqdjyw">
              <el-input v-model="form.sqdjyw.flowparams"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="登记原因设置" prop="sfqydjyymb" v-if="form.sqdjyw">
              <el-radio-group v-model="form.sqdjyw.sfqydjyymb">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记情形及材料">
              <el-input v-model="form.fileUrl" 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"
              :before-upload="uploadRecord" :on-success="handleSuccess">
              <el-button type="primary" icon="el-icon-upload">上传材料</el-button>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="登记原因模板" prop="djyy" v-if="form.sqdjyw">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.sqdjyw.djyy">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-collapse class="modifycollapse" accordion>
        <el-collapse-item title="权利信息" name="0" v-if="form.sqdjyw.sqfl=='2'">
          <lb-table :column="qlxxCol" :pagination="false" heightNumSetting :minHeight="160" :data="form.djlx">
          </lb-table>
        </el-collapse-item>
        <el-collapse-item title="登记情形设置" name="1" v-if="form.sqdjyw.sqfl=='1'">
          <lb-table :column="djqxCol" :pagination="false" heightNumSetting :minHeight="160" :data="form.djqx">
          </lb-table>
        </el-collapse-item>
        <el-collapse-item title="材料信息设置" name="2">
          <lb-table :column="clxxList" :heightNumSetting="true" :key="cLkey" :minHeight="160"
            :pagination="false" :data="form.clxx">
          </lb-table>
        </el-collapse-item>
        <el-collapse-item title="筛选权利设置" name="3" v-if="form.sqdjyw && form.sqdjyw.sfsxql == '1'">
          <div class="dyztsd-title">
            <b>请勾选需要查询的权利信息</b>
            <div>
              <el-button type="text" @click="handleSelectall">选择全部
              </el-button>
              <el-button type="text" @click="handleInvert">清除全部</el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <ul class="qlxx-list">
            <li v-for="(item, index) in form.sxql" :key="index">
              <el-checkbox v-model="item.checked">{{
                item.sxzdmc
              }}</el-checkbox>
            </li>
          </ul>
        </el-collapse-item>
        <el-collapse-item title="办理状态设置" name="4">
          <ul class="screen-list">
            <li v-for="(item, index) in form.sxzt" :key="index">
              <div class="screen-list-left">
                {{ item.sxzdmc }} ：
                <el-checkbox v-model="item.checked">禁止办理</el-checkbox>
              </div>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div slot="footer" class="dialog_footer text-center">
      <el-button @click="$popupCacel()">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">提 交</el-button>
    </div>
  </div>
</template>
<script>
  import { uploadUrl } from '@/api/file'
  import { getUuid } from "@/utils/operation.js"
  import { datas, sendThis } from "./sqywDetail";
  import { upward, down } from "@/utils/operation";
  import { getDjlxInfo, getSqdjywDetail, saveSqdjyw } from "@/api/sysSqdjyw.js";

  import store from '@/store/index.js'
  export default {
    name: "componentDialog",
    props: {
      formData: {
        type: Object,
        default: () => { }
      }
    },
    data () {
      return {
        cLkey: 0,
        loading: false,
        key: 0,
        tn: 0,
        n: 0,
        djlxList: [],
        sqywdylx: store.getters.dictData['sqywdylx'],
        options: [
          { label: "正常申请", value: "1" },
          { label: "一并申请", value: "2" },
          { label: "补录申请", value: "3" }
        ],
        imgUploadUrl: uploadUrl(),
        title: "",
        activeName: "1",
        form: {
          // bsmSqyw: '',
          // ywDetail: {},
          // djqx: [],
          // clxx: []
        },
        djqxCol: datas.djqxCol(),
        clxxList: [],
        clxxCol: datas.clxxCol(),
        ybsqClxxCol: datas.ybsqClxxCol(),
        qlxxCol: datas.qlxxCol(),
      };
    },
    created () {
      sendThis(this)
      this.init()
    },
    watch: {
      'form.djlx': {
        handler (newName, oldName) {
          this.form.ywmcList = this.form.djlx.map(item => ({ nodename: item.djywmc + '+' + item.nodename, bsmSqyw: item.bsmSqyw }))
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true,
        deep: true
      }
    },
    methods: {
      /**
       * @description: 页面初始化
       * @author: renchao
       */
      init () {
        this.tn = 0;
        if (this.formData.sqfl == "2") {
          this.getDetail(this.formData.bsmSqyw);
          this.clxxList = this.ybsqClxxCol
        } else {
          this.clxxList = this.clxxCol
          getDjlxInfo(this.formData.bsmSqyw).then((res) => {
            let { result } = res;
            this.djlxList = result ? result : [];
            if (this.djlxList.length > 0) {
              this.getDetail(this.djlxList[0].bsmSqyw);
            } else {
              this.getDetail(this.formData.bsmSqyw);
            }
          })
        }
        console.log(this.clxxList);
      },
      /**
       * @description: orderNoChange
       * @author: renchao
       */
      orderNoChange () {
        this.$forceUpdate();
      },
      /**
       * @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
       * @author: renchao
       */
      handleSuccess () { },
      //tab选项卡事件
      /**
       * @description: tab选项卡事件
       * @param {*} obj
       * @param {*} index
       * @author: renchao
       */
      handleTitleSelct (obj, index) {
        this.n = 0;
        this.tn = index;
        this.getDetail(this.djlxList[index].bsmSqyw);
      },
      /**
       * @description: 获取业务具体明细内容
       * @param {*} bsmSqyw
       * @author: renchao
       */
      getDetail (bsmSqyw) {
        let that = this
        getSqdjywDetail(bsmSqyw).then((res) => {
          if (res.code === 200) {
            this.form = res.result;
            console.log(this.form);
            if (that.formData.sqfl == "2") {
              that.form.ywmcList = that.form.djlx.map(item => ({ nodename: item.djywmc + '+' + item.nodename, bsmSqyw: item.bsmSqyw }))
            }
            // _this.form.bsmSqyw = res.result.bsmSqyw;
            // _this.form.ywDetail = res.result.ywDetail;
            // _this.$set(_this.form, 'djqx', res.result.djqx);
            // _this.$set(_this.form, 'sxql', res.result.sxql);
            // _this.$set(_this.form, 'clxx', res.result.clxx);
            // _this.$set(_this.form, 'sxzt', res.result.sxzt);
            // _this.$set(_this.form, 'ywDetail', res.result.ywDetail);
            // _this.$set(_this.form, 'sqdjyw', res.result.sqdjyw);
            // _this.$set(_this.form, 'parentRule', res.result.parentRule);
          } else {
            this.$alert(res.message)
          }
        })
      },
      /**
       * @description: 提交保存数据
       * @author: renchao
       */
      submit () {
        let that = this;
        this.loading = true
        saveSqdjyw(this.form).then((res) => {
          this.loading = false
          if (res.code == 200) {
            that.$message({
              message: "修改成功",
              type: "success"
            });
            this.$popupCacel()
          }
        }).catch(() => {
          this.loading = false
        })
      },
      // 筛选权利设置
      handleSelectall () {
        this.form.sxql.forEach(item => item.checked = true)
      },
      handleInvert () {
        this.form.sxql.forEach(item => item.checked = false)
      },
      /**
       * @description: 上移下移
       * @param {*} index
       * @param {*} row
       * @param {*} type
       * @author: renchao
       */
      moveUpward (index, row, type) {
        if (type == "clxx") {
          upward(index, this.form.clxx);
        } else {
          upward(index, this.form.djlx);
        }
      },
      /**
       * @description: moveDown
       * @param {*} index
       * @param {*} row
       * @param {*} type
       * @author: renchao
       */
      moveDown (index, row, type) {
        if (type == "clxx") {
          down(index, this.form.clxx);
        } else {
          down(index, this.form.djlx);
        }
      },
      /**
       * @description: addDjqx
       * @author: renchao
       */
      addDjqx () {
        this.form.djqx.push({
          bsmSqyw: getUuid(32),
          nodecode: "",
          nodename: "",
          enabled: "1",
          djyy: "",
          sfqydjyymb: "0",
        });
      },
      /**
       * @description: removeDjqx
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      removeDjqx (index, row) {
        this.form.djqx.splice(index, 1);
        this.cLkey++
      },
      /**
       * @description: addClxx
       * @author: renchao
       */
      addClxx () {
        this.form.clxx.push({
          isrequired: "1",
          djqxbm: "",
          clbm: "",
          clmc: "",
          cllx: "",
          sfggcl: "1",
        });
      },
      /**
       * @description: removeClxx
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      removeClxx (index, row) {
        this.form.clxx.splice(index, 1);
      }
    }
  }
</script>
<style lang='scss' scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/styles/dialogBox.scss";
  @import "~@/styles/collapse.scss";
  @import "~@/styles/dialogBoxheader.scss";

  .contentBox {
    height: 75vh;
    overflow-y: scroll;
  }
  /deep/.el-radio__label {
    display: inline-block !important;
  }
  /deep/.el-radio {
    margin-right: 5px;
  }
  .el-radio-group {
    white-space: nowrap;
  }
  .form {
    background: #eee;
    padding: 0 10px;
  }

  .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;
      }
    }
  }

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

  .dyztsd-title {
    @include flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
  }

  .qlxx-list {
    @include flex;
    flex-wrap: wrap;
    padding-left: 20px;

    li {
      width: 25%;
      margin-bottom: 15px;
    }
  }

  .screen-list {
    @include flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid $borderColor;
    border-bottom: none;

    li {
      @include flex;
      align-items: center;
      width: 25%;
      line-height: 50px;
      border-bottom: 1px solid $borderColor;
      padding-left: 20px;
    }

    &-left {
      margin-right: 20px;
      width: 160px;
      white-space: nowrap;
    }

    li:nth-child(odd) {
      border-right: 1px solid $borderColor;
    }
  }
</style>