<template>
  <div>
    <basic-container>
      <avue-crud
        ref="crud"
        :option="option"
        :data="dataList"
        v-model="form"
        :page.sync="page"
        :search.sync="search"
        :table-loading="loading"
        @on-load="onLoad"
        @search-change="searchChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @saveColumn="saveColumn"
      >
        <template slot-scope="scope" slot="status">
          <span v-if="scope.row.status == 'N'">新建</span>
          <span v-if="scope.row.status == 'A'">有效</span>
          <span v-if="scope.row.status == 'S'">停用</span>
          <span v-if="scope.row.status == 'Z'">暂存</span>
        </template>
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click.stop="addHandle"
          >新增</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click.stop="editOpen(scope.row)"
          >编辑
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click.stop="rowDel(scope.row, scope.index)"
          >删除
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      append-to-body
      :visible.sync="visible"
      width="80%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      v-dialog-drag
      :title="title"
    >
      <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
        <el-form-item label="审核路径名称" prop="pathName">
          <el-input v-model="dataForm.pathName" placeholder="审核路径名称"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="dataForm.status" placeholder="状态" style="width: 100%">
            <el-option
              v-for="item in optionsStatue"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维护人" prop="opUserName">
          <el-input v-model="dataForm.opUserName" disabled placeholder="维护人"></el-input>
        </el-form-item>
        <el-form-item label="维护时间" prop="opDate">
          <el-input v-model="dataForm.opDate" disabled placeholder="维护时间"></el-input>
        </el-form-item>
        <el-form-item label="备注" class="full" prop="remarks">
          <el-input v-model="dataForm.remarks" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <avue-crud
        ref="dialogCrud"
        :option="detailOption"
        :data="detailData"
      >
        <template slot="levelName" slot-scope="{row,index}">
          <el-input
            v-model="row.levelName"
            clearable
            placeholder="请输入"
          ></el-input>
        </template>
        <template slot="remarks" slot-scope="{row,index}">
          <el-input
            v-model="row.remarks"
            clearable
            placeholder="请输入"
          ></el-input>
        </template>
        <template slot="iffixAuditUser" slot-scope="{row,index}">
          <el-select
            v-model="row.iffixAuditUser"
          >
            <el-option
              label="是"
              value="T"
            ></el-option>
            <el-option
              label="否"
              value="F"
            ></el-option>
          </el-select>
        </template>
        <template slot="iffinalItem" slot-scope="{row,index}">
          <el-select
            v-model="row.iffinalItem"
          >
            <el-option
              label="是"
              value="T"
            ></el-option>
            <el-option
              label="否"
              value="F"
            ></el-option>
          </el-select>
        </template>
        <template slot="auditUserId" slot-scope="{row,index}">
          <el-select
            v-model="row.auditUserId"
            filterable
            collapse-tags
            placeholder="审核人"
          >
            <el-option v-for="(item,index) in auditUserIdDic"
                       :key="index"
                       :label="item.realName"
                       :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click.stop="addDetail"
          >新增</el-button>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="rowDetailDelete(detailData, index)"
          >移除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDia">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import option from "./config/mainList.json";
import detailOption from "./config/detail.json";
import { getList, modify, removeList, detailData ,getUserList} from "@/api/approval/processConfig";
import _ from "lodash";

export default {
  name: "index",
  data() {
    return {
      option: {},
      dataList: [],
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300, 400, 500]
      },
      detailData: [],
      auditUserIdDic:[],
      loading: false,
      search: {},
      visible: false,
      title: '',
      detailOption: {},
      optionsStatue: [
        {
          id: 'A',
          name: '有效'
        },
        {
          id: 'S',
          name: '停用'
        },
      ],
      dataForm: {
        status: 'A',
      },
      dataRule: {},
    }
  },
  created() {
    this.option = option
    this.detailOption = detailOption

    getUserList().then(res =>{
      this.auditUserIdDic = res.data.data.records
    })

    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0){
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  methods: {
    onLoad(page, params) {
      params = {
        ...params,
        current: page.currentPage,
        size: page.pageSize,
      }
      this.loading = true
      getList(params).then(res => {
        this.dataList = res.data.data.records ? res.data.data.records : [];
      }).finally(() => {
        this.loading = false
      })
    },
    addHandle() {
      this.title = '新增';
      this.visible = !this.visible
      this.dataForm = {}
      this.detailData = []
    },
    // 编辑
    editOpen(row) {
      detailData({id: row.id}).then(res => {
        this.dataForm = res.data.data
        this.detailData = res.data.data.auditPathsLevels
      })
      this.title = '修改';
      this.visible = !this.visible
    },
    rowDel(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        removeList(row.id).then(res =>{
          if(res.data.success){
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.page.currentPage = 1;
            this.onLoad(this.page);
          }
        })
      })
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    refreshChange() {
      this.onLoad(this.page, this.search);
    },
    async saveColumn() {
      // const inSave = await this.saveColumnData(
      //   this.getColumnName(50),
      //   this.option
      // );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    addDetail() {
      this.detailData.push({
        levelName: null,
        auditUserId: [],
        iffixAuditUser: 'T',
        iffinalItem: 'T',
        remarks: null,
        $cellEdit: true
      })
    },
    rowDetailDelete(row, index) {
      row.splice(index, 1)
    },
    closeDia() {
      this.visible = false
    },
    dataFormSubmit() {
      if (this.detailData.length === 0) {
        this.$message.error('请维护审批级次')
        return false
      }
      for (let x in this.detailData) {
        if (this.detailData[x].iffixAuditUser === 'S') {
          if (this.detailData[x].auditUserId === null || this.detailData[x].auditUserId === '' || this.dataList[x].auditUserId.length === 0) {
            this.$message.error('请维护第' + (Number(x) + 1) + '级的审核人')
            return false
          }
        }
      };

      this.detailData.map(item=>{
        item.levelId = _.add(item.$index,1)
        delete item.id
      })

      const params ={
        ...this.dataForm,
        auditPathsLevels : this.detailData
      }

      modify(params).then(res =>{
        if(res.data.success){
          this.$message.success("操作成功!")
          this.visible = false
          this.refreshChange()
        }
      })
    },
  },
}
</script>

<style scoped>

</style>
