<template>
  <div class="common-box">
    <el-tabs v-model="codeType" @tab-click="handleClick">
      <el-tab-pane
        :label="item.codeName"
        :name="item.codeType"
        v-for="(item, index) in codeList"
        :key="index"
      >
        <el-form
          label-position="left"
          label-width="80px"
          v-if="codeType == item.codeType"
          :model="prefixData"
          :ref="'dataForm-' + item.codeType"
          class="demo-ruleForm"
          inline-message
        >
          <div style="margin: 10px 0 20px">
            <el-form-item
              label="位数"
              prop="codeIndex"
              :rules="[
                { required: true, message: '位数不能为空' },
                { type: 'number', message: '位数必须为数字值' }
              ]"
            >
              <el-input
                placeholder="请输入位数"
                v-model.number="prefixData.codeIndex"
                style="width: 125px"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item label="选择字典">
              <el-input
                disabled
                style="width: 125px; margin-right: 5px"
                v-model="prefixData.dicCode"
              ></el-input>
              <el-button type="primary" plain @click="openTree()"
                >选择字典
              </el-button>
            </el-form-item> -->
            <div>
              <el-button
                plain
                type="primary"
                class="el-icon-plus"
                @click.prevent="addRow()"
                >添加行</el-button
              >
              <el-button
                plain
                type="danger"
                class="el-icon-minus"
                @click.prevent="delData()"
                >删除行</el-button
              >
            </div>
          </div>

          <el-table
            id="table"
            ref="table"
            v-loading="listLoading"
            :data="prefixData.prefix"
            element-loading-text="加载中"
            fit
            stripe
            @selection-change="selectRow"
          >
            <template slot="empty">
              <img src="@/assets/nopage.png" alt />
              <p>暂无数据</p>
            </template>
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column
              fixed
              type="index"
              label="序号"
              width="60"
            ></el-table-column>
            <el-table-column label="标识位" width="300">
              <template #header>
                <span style="color: red; margin-right: 4px">*</span>
                <span>标识位</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'prefix.' + scope.$index + '.flag'"
                  :rules="[
                    {
                      required: true,
                      message: '标识位不能为空',
                      trigger: 'change'
                    }
                  ]"
                >
                  <el-select
                    v-model="scope.row.flag"
                    placeholder="请选择标识位"
                    style="width: 150px"
                    @change="flagChange(scope.row)"
                  >
                    <el-option label="固定字符串" value="0"> </el-option>
                    <el-option label="数据字典" value="1"> </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="前缀" width="350">
              <template #header>
                <span style="color: red; margin-right: 4px">*</span>
                <span>前缀</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'prefix.' + scope.$index + '.codePrefix'"
                  :rules="[
                    {
                      required: true,
                      message: '前缀不能为空',
                      trigger: 'change'
                    }
                  ]"
                >
                  <el-input
                    v-if="scope.row.flag != '1'"
                    style="width: 180px"
                    v-model="scope.row.codePrefix"
                  ></el-input>
                  <el-select
                    v-if="scope.row.flag == '1'"
                    v-model="scope.row.codePrefix"
                    placeholder="请选择前缀"
                    style="width: 180px"
                  >
                    <el-option :label="i" :value="i" v-for="i in nums" :key="i">
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="前缀说明">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                  <el-input v-model="scope.row.codeDscr"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>

          <el-button
            type="primary"
            style="margin-top: 20px; float: right"
            @click="saveData"
            >保存</el-button
          ></el-form
        >
      </el-tab-pane>
    </el-tabs>

    <!--打开字典树对话框-->
    <el-dialog
      title="选择前缀"
      :visible.sync="dicFormVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <dic-ele
        :status="'code'"
        @setDic="cpnclick"
        :tableRadio="dicCode"
      ></dic-ele>
    </el-dialog>
  </div>
</template>

<script>
import { getCode, addCode, getPrefix, getMaxLv } from "@/api/system/code";
import dicEle from "@/views/components/dicEle";

export default {
  components: { dicEle },
  data() {
    return {
      // 回显前缀
      dicCode: "",
      // 字典对话框
      dicFormVisible: false,
      // 加载中
      listLoading: false,
      codeType: "",
      // 编码列表
      codeList: [],
      listQuery: {},
      // 前缀信息
      prefixData: {},
      // 保存参数
      saveList: {},
      codeSort: 1,
      selectlistRow: [],
      nums: 0
    };
  },

  created() {
    this.getData();
  },

  methods: {
    // 当标识符发生改变
    flagChange(row) {
      if (row.flag == "1") {
        if (!this.prefixData.dicCode) {
          row.flag = "0";
          this.$message({
            message: "请先选择字典",
            type: "info"
          });
          return false;
        }
      }
      row.codePrefix = "";
    },

    // 选择前缀值确定
    cpnclick(value) {
      this.prefixData.dicCode = value;
      this.getLv();
      this.dicFormVisible = false;
    },

    // 获取最大级数
    getLv() {
      getMaxLv({ dicCode: this.prefixData.dicCode }).then((response) => {
        this.nums = Number(response.data);
      });
    },

    // 打开树结构对话框
    // openTree() {
    //   let findData = [];
    //   findData = this.prefixData.prefix.find((item) => {
    //     return item.flag == "1";
    //   });
    //   if (findData) {
    //     this.$message({
    //       message: "请先删除标识位为数据字典的行，才能重新选择字典",
    //       type: "info",
    //     });
    //     return false;
    //   }
    //   this.dicCode = this.prefixData.dicCode;
    //   this.dicFormVisible = true;
    // },

    // 获取表格选中时的数据
    selectRow(val) {
      this.selectlistRow = val;
    },

    // 增加行
    addRow() {
      if (this.prefixData.prefix.length >= 6) {
        this.$message({
          message: "最多只能添加6行",
          type: "info"
        });
        return false;
      }
      var list = {
        codeSort: this.codeSort + 0,
        codePrefix: "",
        flag: "0",
        codeDscr: "",
        id: ""
      };
      this.prefixData.prefix.push(list);
      this.codeSort += 1;
    },

    // 删除选中行
    delData() {
      if (this.selectlistRow.length == 0) {
        this.$message({
          message: "请先选择要删除的行",
          type: "info"
        });
        return false;
      }
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow;
        val.forEach((val, index) => {
          this.prefixData.prefix.forEach((v, i) => {
            if (val.codeSort == v.codeSort) {
              this.prefixData.prefix.splice(i, 1);
            }
          });
        });
      }
      this.prefixData.prefix.forEach((v, i) => {
        v.codeSort = i + 1;
      });
      this.codeSort = this.prefixData.prefix.length + 1;
      this.selectlistRow = [];
    },

    // 保存数据
    saveData() {
      this.$refs["dataForm-" + this.codeType][0].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.saveList.codeType = this.codeType;
            this.saveList.codeIndex = this.prefixData.codeIndex;
            // this.saveList.dicCode = this.prefixData.dicCode;
            this.saveList.data = [];
            this.prefixData.prefix.forEach((item) => {
              item.codePrefix = item.codePrefix + "";
              this.saveList.data.push(item);
            });
            // this.saveList.data = this.prefixData.prefix;
            addCode(this.saveList).then((response) => {
              this.$message({
                message: response.message || "操作成功",
                type: "success"
              });
            });
          });
        }
      });
    },

    // tab栏点击
    handleClick(tab, event) {
      this.prefixData = {};
      this.nums = 0;

      this.codeType = tab.name;
      this.getPrefixNum();
    },

    // 获取详情
    getPrefixNum() {
      this.listLoading = true;
      getPrefix({ codeType: this.codeType })
        .then((response) => {
          this.prefixData = response.data;
          let length = this.prefixData.prefix.length;
          if (this.prefixData.dicCode) {
            this.getLv();
          }
          this.codeSort = length + 1;
          this.listLoading = false;
          this.$nextTick(() => {
            this.$refs["dataForm-" + this.codeType][0].clearValidate();
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    // 获取编码列表
    getData() {
      this.listQuery.codeType = "";
      getCode(this.listQuery).then((response) => {
        this.codeList = response.data;
        if (this.codeList && this.codeList.length > 0) {
          this.codeType = this.codeList[0].codeType;
          this.getPrefixNum();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#table {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>