<template>
  <zj-tab-page
    ref="tabPage"
    :defaultActives="[
      { key: 'list', label: $route.meta.title + '-列表', essential: true },
    ]"
  >
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: 'hidden',
        }"
      >
        <zj-page-container direction="row">
          <div class="catalogue">
            <div class="title">类型名称</div>
            <zj-page-container>
              <zj-page-fill>
                <el-tree
                  :data="typeList"
                  :props="defaultProps"
                  default-expand-all
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  @node-click="handleNodeClick"
                  current-node-key="ASSIST_UNIT"
                  node-key="dictType"
                  ref="listTree"
                >
                </el-tree>
              </zj-page-fill>
            </zj-page-container>
          </div>
          <template-page
            ref="pageRef"
            :getList="getList"
            :columnParsing="columnParsing"
            :optionsEvensGroup="optionsEvensGroup"
            :tableAttributes="tableAttributes"
            :tableEvents="tableEvents"
            :operationColumnWidth="160"
            :operation="operation()"
            :exportList="exportList"
          >
          </template-page>
        </zj-page-container>
      </div>
      <div
        v-if="~['add', 'detail'].indexOf(activeKey)"
        style="box-sizing: border-box; padding: 16px"
      >
        <zj-form-container
          ref="formRef"
          :form-data="formData"
          :styleSwitch="false"
        >
          <zj-form-module
            :title="data.label"
            label-width="100px"
            :showPackUp="false"
            :form-data="formData"
            :form-items="formItems"
            :disabled="formDialogType == 2"
          >
          </zj-form-module>
        </zj-form-container>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="data.removeTab()">取 消</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="formConfirm(data.removeTab)"
            >确定</el-button
          >
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from "@/components/template/template-page-1.vue";
import AddDataDictionary from "./addDataDictionary.vue";
import import_mixin from "@/components/template/import_mixin.js";
import { required } from "@/components/template/rules_verify.js";
import { commonTemplateDownload } from "@/api/common.js";
import {
  getType,
  getDataDictionaryExport,
  getDataDictionary,
  add,
  edit,
  del,
  getDetail,
  listImport,
} from "@/api/dataDictionary.js";
export default {
  components: {
    TemplatePage,
    AddDataDictionary,
  },
  mixins: [import_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: "新增",
              click: this.addData,
            },
          ],
        ],
        [
          [
            {
              name: "下载导入模板",
              click: this.handleDownload,
            },
          ],
          [
            {
              name: "导入模板",
              render: () => {
                return this.importButton(listImport, "导入模板");
              },
            },
          ],
        ],
      ],
      // 表格属性
      tableAttributes: {},
      // 表格事件
      tableEvents: {},
      visible: false,
      item: null,
      dictType: "ASSIST_UNIT",
      dictTypeName: "辅材单位",
      typeList: [],
      defaultProps: {
        children: "",
        label: "remark",
      },
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ["新增", "编辑", "详情"],
      formData: {
        companyName: JSON.parse(localStorage.getItem("greemall_user"))
          .companyName,
        dictType: "ASSIST_UNIT",
        dictTypeName: "辅材单位",
        dictValue: "",
        status: "ON",
        sortNum: "",
        remark: "",
        dictCode: "",
      },
    };
  },
  created() {
    this.getType();
  },
  computed: {
    formItems() {
      return [
        {
          md: 24,
          isShow: true,
          name: "el-input",
          attributes: { placeholder: "请输入", disabled: true },
          formItemAttributes: {
            label: "类型名称",
            prop: "dictTypeName",
            rules: [...required],
          },
        },
        {
          md: 24,
          isShow: true,
          name: "el-input",
          attributes: { placeholder: "请输入" },
          formItemAttributes: {
            label: "字典值",
            prop: "dictValue",
            rules: [...required],
          },
        },
        {
          md: 24,
          isShow: true,
          name: "el-input",
          attributes: { placeholder: "请输入" },
          formItemAttributes: {
            label: "字典编码",
            prop: "dictCode",
            rules: [],
          },
        },
        {
          md: 24,
          isShow: true,
          name: "slot-component",
          attributes: {},
          formItemAttributes: {
            label: "状态",
            prop: "status",
            rules: [...required],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <el-radio-group v-model={this.formData.status}>
                <el-radio disabled={this.formDialogType == 2} label="ON">
                  启用
                </el-radio>
                <el-radio disabled={this.formDialogType == 2} label="OFF">
                  禁用
                </el-radio>
              </el-radio-group>
            );
          },
        },
        {
          md: 24,
          isShow: true,
          name: "el-input",
          attributes: { placeholder: "请输入" },
          formItemAttributes: {
            label: "排序",
            prop: "sortNum",
            rules: [],
          },
        },
        {
          md: 24,
          isShow: true,
          name: "el-input",
          attributes: {
            placeholder: "请输入备注内容",
            type: "textarea",
            rows: 3,
          },
          formItemAttributes: {
            label: "备注",
            prop: "remark",
            rules: [],
          },
        },
      ];
    },
  },
  methods: {
    // 列表请求函数
    getList(p) {
      try {
        var pam = JSON.parse(JSON.stringify(p));
        if (this.dictType) {
          pam.params.push({
            param: "a.dict_type",
            compare: "=",
            value: this.dictType,
          });
        }
        return getDataDictionary(pam);
      } catch (error) {
        console.log(error);
      }
    },
    // 列表导出函数
    exportList: getDataDictionaryExport,
    getType() {
      getType().then((res) => {
        this.typeList = res.data;
        this.$refs.pageRef.refreshList();
      });
    },
    handleNodeClick(e) {
      this.dictType = e.dictType;
      this.formData.dictType = e.dictType;
      this.formData.dictTypeName = e.remark;
      this.dictTypeName = e.remark;
      this.$refs.pageRef.refreshList();
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData;
    },
    operation() {
      if (true) {
        return (h, { row, index, column }) => {
          return (
            <div class="operation-btns">
              {true ? (
                <zj-button
                  useLoading={false}
                  parameter={[row]}
                  buttonAttributes={{
                    size: "mini",
                    type: "primary",
                  }}
                  buttonEvents={{
                    click: (row) => {
                      this.$refs.tabPage.addTab({
                        // 对应显示的模块
                        activeKey: "detail",
                        // 唯一标识
                        key: "detail",
                        // 页签名称
                        label: "编辑",
                        // 打开时事件
                        triggerEvent: () => {
                          this.formCancel();
                          this.formDialogType = 1;
                          this.$nextTick(() => {
                            this.formData = row;
                          });
                        },
                        // 关闭时事件
                        closeEvent: () => {},
                      });
                    },
                  }}
                >
                  编辑
                </zj-button>
              ) : null}
              {true ? (
                <el-popconfirm
                  icon="el-icon-info"
                  icon-color="red"
                  title="这是一段内容确定删除吗？"
                  onConfirm={() => {
                    del({ id: row.sysDictId })
                      .then((res) => {
                        this.$refs.pageRef.refreshList();
                        this.$message({
                          type: "success",
                          message: `删除成功!`,
                        });
                      })
                      .catch((err) => {
                        console.log(err);
                      });
                  }}
                >
                  <zj-button
                    slot="reference"
                    buttonAttributes={{
                      size: "mini",
                      type: "danger",
                    }}
                  >
                    删除
                  </zj-button>
                </el-popconfirm>
              ) : null}
            </div>
          );
        };
      }
      return undefined;
    },
    addData() {
      this.$refs.tabPage.addTab({
        // 对应显示的模块
        activeKey: "add",
        // 唯一标识
        key: "add",
        // 页签名称
        label: "新增",
        // 打开时事件
        triggerEvent: () => {
          this.formCancel();
          this.formDialogType = 0;
        },
        // 关闭时事件
        closeEvent: () => {},
      });
    },
    formCancel() {
      this.$refs?.formRef?.$refs?.inlineForm?.clearValidate();
      this.$data.formData = this.$options.data().formData;
      this.formData.dictType = this.dictType;
      this.formData.dictTypeName = this.dictTypeName;
    },
    formConfirm(removeTab) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          [add, edit][this.formDialogType](this.formData).then((res) => {
            this.$message({
              type: "success",
              message: this.formDialogTitles[this.formDialogType] + `成功!`,
            });
            this.$refs.pageRef.refreshList();
            removeTab("list");
          });
        }
      });
    },
    // 下载导入模版
    handleDownload() {
      commonTemplateDownload(
        { name: "数据字典导入.xlsx" },
        `${this.$route.meta.title}`
      )
        .then((res) => {
          this.$message({
            message: "下载成功",
            type: "success",
          });
        })
        .catch((err) => {
          this.$message.error("下载失败");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 120px;
  margin: 24px 0 20px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  font-weight: bold;
}
</style>
