<template>
  <a-layout>
    <a-layout-header>
      <a-form layout="inline" class="demo-form-inline">
        <a-form-item label="督查事项" style="min-width: 19%;">
          <a-input v-model:value="name" placeholder="督查事项" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-button @click="searchNameTable" type="primary">查询</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <a-table
        :columns="tableColumn"
        :data-source="tableData"
        row-key="id"
        style="width: 100%;"
        :style="{ height: tableHeight + 'px' }"
        :scroll="{ x: true, y: tableHeight - 60 }"
        :pagination="false"
        bordered>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'intm'">
            {{ dateFormat(record.intm, 'yyyy-MM-dd') }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button size="small" type="link" @click="handleEdit(index, record)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </a-layout-content>

    <a-modal
      :open="visible"
      class="pblmEascader"
      :title="`${visibleName}对象基础信息`"
      width="70%"
      @cancel="visible = false">
      <a-button type="primary" @click="addCell()">添加</a-button>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        row-key="id"
        style="width: 100%;"
        :style="{ height: 600 + 'px' }"
        :scroll="{ x: true, y: 540 }"
        :pagination="false"
        bordered>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'required'">
            <span v-if="record.required == '1'">是</span>
            <span v-else>否</span>
          </template>
          <template v-else-if="column.dataIndex === 'filterBox'">
            <span v-if="record.filterBox == '1'">是</span>
            <span v-else>否</span>
          </template>
          <template v-else-if="column.dataIndex === 'disabled'">
            <span v-if="record.disabled == '1'">是</span>
            <span v-else>否</span>
          </template>
          <template v-else-if="column.dataIndex === 'type'">
            <span v-if="record.type == '1'">文本框</span>
            <span v-else-if="record.type == '2'">数值</span>
            <span v-else-if="record.type == '3'">单选下拉框</span>
            <span v-else-if="record.type == '4'">日期格式</span>
            <span v-else-if="record.type == '5'">多选下拉框</span>
            <span v-else-if="record.type == '6'">级联选择器</span>
            <span v-else>文本框</span>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button size="small" type="link" @click="editCell(index, record)">编辑</a-button>
            <a-button size="small" type="link" @click="deleteCell(index, record)">删除</a-button>
            <a-button v-if="record.type == '3' || record.type == '5' || record.type == '6'" size="small" type="link" @click="addSelectData(index, record)">设置下拉框数据</a-button>
          </template>
        </template>
      </a-table>
      <span slot="footer">
        <a-button type="primary" @click="visible = false">确定</a-button>
      </span>
    </a-modal>

    <a-modal
      :open="visibleRow"
      class="pblmEascader"
      :title="`${visibleRowName}对象基础信息列`"
      width="50%"
      okText="保存"
      @ok="submitRow"
      @cancel="visibleRow = false">
      <a-form
        ref="visibleRowRef"
        :model="visibleRowParams"
        class="demo-form-inline"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        :rules="visibleRowRules">
        <a-form-item label="列名" prop="name">
          <a-input v-model:value="visibleRowParams.name" placeholder="列名" allow-clear />
        </a-form-item>
        <a-form-item label="是否必填">
          <a-select v-model:value="visibleRowParams.required">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="2">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否是筛选框">
          <a-select v-model:value="visibleRowParams.filterBox">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="2">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否禁用">
          <a-select v-model:value="visibleRowParams.disabled">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="2">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="列类型">
          <a-select v-model:value="visibleRowParams.type">
            <a-select-option v-for="item in visibleSelect" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="父级列名" v-if="visibleRowParams.type == '6'">
          <a-select v-model:value="visibleRowParams.parentId">
            <a-select-option v-for="item in cascaderData" :key="item.id" :value="item.id" :disabled="item.id == visibleRowParams.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      :open="visibleSelectDialog"
      class="pblmEascader"
      title="设置下拉框数据"
      width="50%"
      okText="保存"
      @ok="submitSelectData"
      @cancel="visibleSelectDialog = false">
      <a-form
        class="demo-form-inline"
        :model="selectParams"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }">
        <a-form-item v-for="(item, index) in selectParams.selectData" :key="index" :label="'字段'+ (index +1)">
          <a-input v-model:value="item.content" placeholder="请输入字段名称" style="width: 400px;"/>
          <a-icon
            class="dynamic-delete-button"
            type="minus-circle-o"
            @click="removeSelectRow(index, item)"
          />
          <a-form-item v-if="parentId" label="父级" :label-col="{ span: 2 }" :wrapper-col="{ span: 13 }">
            <a-select v-model:value="item.pid">
              <a-select-option v-for="item1 in parentSelect" :key="item1.id" :value="item1.id">{{ item1.content }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form-item>
        <a-form-item :wrapperCol="{span: 16, offset: 6}">
          <a-button type="dashed" style="width: 60%" @click="addSelectRow">
            <a-icon type="plus" /> 添加字段
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-layout>
</template>

<script>
import request from '../../utils/gw_ajax_request';
import { dateFormat } from '../../utils/gw_date';
export default {
  components: {},
  data() {
    return {
      name: '', // 督查事项
      tableColumn: [
        {
          title: '督查事项',
          dataIndex: 'name',
          width: 500,
          align: 'center',
        },
        {
          title: '下发时间',
          dataIndex: 'intm',
          align: 'center',
        },
        {
          title: '操作',
          width: 300,
          dataIndex: 'action',
          align: 'center',
        },
      ],
      tableData: [],
      tableHeight: window.innerHeight - 200,
      visible: false,
      visibleName: '',
      visibleId: '',
      columns: [
        {
          title: '列名',
          dataIndex: 'name',
          width: 200,
          align: 'center',
        },
        {
          title: '是否必填',
          dataIndex: 'required',
          width: 100,
          align: 'center',
        },
        {
          title: '是否是筛选框',
          dataIndex: 'filterBox',
          width: 100,
          align: 'center',
        },
        {
          title: '是否禁用',
          dataIndex: 'disabled',
          width: 100,
          align: 'center',
        },
        {
          title: '列类型',
          dataIndex: 'type',
          width: 150,
          align: 'center',
        },
        {
          title: '父级',
          dataIndex: 'parentName',
          width: 150,
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          // width: 200,
          align: 'left',
          // fixed: 'right'
        },
      ],
      dataSource: [],
      visibleRow: false,
      visibleRowName: '新增',
      visibleRowParams: {
        name: '',
        type: '1',
        required: '2',
        filterBox: '2',
      },
      visibleSelect: [
        {
          label: '文本框',
          value: '1',
        },
        {
          label: '数值',
          value: '2',
        },
        {
          label: '单选下拉框',
          value: '3',
        },
        {
          label: '日期格式',
          value: '4',
        },
        {
          label: '多选下拉框',
          value: '5',
        },
        {
          label: '级联选择器',
          value: '6',
        },
      ],
      visibleRowRules: {
        name: [
          {
            required: true,
            message: '列名为必填',
            trigger: 'change',
          },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
      },
      cascaderData: [],
      visibleSelectDialog: false,
      selectParams: {
        fieldId: '',
        selectData: [],
      },
      parentId: '',
      parentSelect: [],
    };
  },
  created() {
    this.searchNameTable();
  },
  methods: {
    dateFormat,
    // 查询督查事项列表
    searchNameTable() {
      const { name } = this;
      request
        .post('/bis/insp/BisDynamicModelTab/getTabList', { name })
        .then((res) => {
          if (res.success) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 编辑督查事项
    handleEdit(index, val) {
      this.visibleName = val.name;
      this.visibleId = val.id;
      this.getFieldList();
      this.visible = true;
    },
    // 获取列数据
    getFieldList() {
      const { visibleId: tabId } = this;
      request
        .post('bis/insp/BisDynamicModelField/getFieldList', { tabId })
        .then((res) => {
          this.dataSource = [];
          this.cascaderData = [];
          res.data.forEach((item) => {
            if (item.stat == '1') {
              this.dataSource.push(item);
            }
            if (item.type == '6') {
              this.cascaderData.push(item);
            }
          });
        });
    },
    // 添加列
    addCell() {
      this.visibleRow = true;
      this.visibleRowName = '新增';
      this.visibleRowParams = {
        name: '',
        type: '1',
        required: '2',
        filterBox: '2',
      };
    },
    // 编辑列
    editCell(index, row) {
      this.visibleRow = true;
      this.visibleRowName = '编辑';
      this.visibleRowParams = row;
      this.visibleRowParams.filterBox = row.filterBox || '2';
    },
    // 保存列新增和修改
    submitRow() {
      this.$refs.visibleRowRef.validate((valid) => {
        if (valid) {
          const {
            visibleRowParams: {
              name,
              type,
              required,
              filterBox,
              id,
              parentId,
              disabled,
            },
            visibleId: tabId,
          } = this;
          const params = {
            name,
            type,
            required,
            filterBox,
            tabId,
            disabled,
          };
          if (type == '6') {
            params.parentId = parentId;
          }
          if (this.visibleRowName == '新增') {
            request
              .post('/bis/insp/BisDynamicModelField/add', params)
              .then((res) => {
                if (res.success) {
                  this.$message.success('添加成功！');
                  this.getFieldList();
                  this.visibleRow = false;
                } else {
                  this.$message.error(res.message);
                }
              });
          } else {
            params.id = id;
            request
              .post('/bis/insp/BisDynamicModelField/update', params)
              .then((res) => {
                if (res.success) {
                  this.$message.success('修改成功！');
                  this.getFieldList();
                  this.visibleRow = false;
                } else {
                  this.$message.error(res.message);
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    // 删除列
    deleteCell(index, row) {
      this.$confirm({
        title: '提示',
        content: '确定删除吗？',
        okType: 'warning',
        onOk: () => {
          request
            .post(`/bis/insp/BisDynamicModelField/delete/${row.id}`)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功！');
                this.getFieldList();
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
    // 设置下拉框
    addSelectData(index, row) {
      this.selectParams.selectData = [];
      this.selectParams.fieldId = row.id;
      this.parentId = row.parentId;
      if (this.parentId) {
        request
          .post('/bis/insp/BisDynamicModelComboBox/getList', {
            fieldId: row.parentId,
          })
          .then((res) => {
            this.parentSelect = res.data;
          });
      }
      this.visibleSelectDialog = true;
      const params = {
        fieldId: row.id,
      };
      request
        .post('/bis/insp/BisDynamicModelComboBox/getList', params)
        .then((res) => {
          this.selectParams.selectData = res.data;
        });
    },
    // 提交下拉框数据
    submitSelectData() {
      const params = {
        fieldId: this.selectParams.fieldId,
        modelComboBoxs: this.selectParams.selectData,
      };
      request
        .post('/bis/insp/BisDynamicModelComboBox/batchSaveList', params)
        .then((res) => {
          if (res.success) {
            this.$message.success('保存成功！');
            this.visibleSelectDialog = false;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 添加下拉框数据按钮
    addSelectRow() {
      if (
        this.selectParams.selectData.length > 0 &&
        this.selectParams.selectData[this.selectParams.selectData.length - 1]
          .content == ''
      ) {
        this.$message.error('请完成上一个填写再继续添加！');
      } else {
        this.selectParams.selectData.push({
          content: '',
        });
      }
    },
    removeSelectRow(index, item) {
      this.selectParams.selectData.splice(index, 1);
    },
  },
};
</script>

<style lang='less' scoped>
@import url('../../assets/style/tableScroll.less');
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
