<template>
  <div class="main">
    <div class="header">
      <el-form :inline="true" :model="contractTypeQuey">
        <!-- 合同名称，合同编号，合同类型，合同性质 -->
        <el-form-item>
          <el-input
            v-model="contractTypeQuey.name"
            placeholder="根据类型名称查询"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="qurey()"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            @click="reset()"
            >重置</el-button
          >
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="dialogFormVisible = true"
          >
            添加类型
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container">
      <el-table
        :data="contractTypeList"
        style="width: 100%; text-align: center"
        border
      >
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{
              (contractTypeQuey.pageNum - 1) * contractTypeQuey.pageSize +
              scope.$index +
              1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="类别名称" />
        <el-table-column prop="state" label="启用状态" width="100px">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              @change="
                updateState({
                  ...scope.row,
                  state: Math.abs(scope.row.state - 1),
                })
              "
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)"
              >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
        @current-change="getContractTypeList"
        :current-page.sync="contractTypeQuey.pageNum"
        :page-size="contractTypeQuey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="(isEdit ? '修改' : '添加') + '合同类型'"
      :visible.sync="dialogFormVisible"
      @closed="resetData"
    >
      <el-form ref="form" :model="dynamicValidateForm" label-width="130px">
        <el-form-item
          label="合同类型名称"
          prop="name"
          :rules="[{ required: true, message: '请输入合同类型名称' }]"
        >
          <el-input
            v-model="dynamicValidateForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          v-show="!isEdit"
          v-for="(name, index) in dynamicValidateForm.names"
          :label="'合同类型名称' + (parseInt(index) + 1)"
          :prop="'names.' + index + '.value'"
          :key="index"
          :rules="[
            {
              required: true,
              message: '合同类型名称不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="name.value">
            <el-button
              slot="append"
              icon="el-icon-delete"
              @click.prevent="dynamicValidateForm.names.splice(index, 1)"
              >删除
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="!isEdit"
          @click="dynamicValidateForm.names.push({ value: '' })"
          >增加类型</el-button
        >
        <el-button @click="resetData">取 消</el-button>
        <el-button
          v-if="isEdit"
          type="primary"
          @click="update(dynamicValidateForm)"
          >确 定</el-button
        >
        <el-button v-else type="primary" @click="addContractType"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  selectContractTypeList,
  addContractType as insert,
  updateContractType,
  updateContractTypeState,
} from "@/api/contract";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["companyId"]),
  },
  data() {
    return {
      contractTypeQuey: {
        name: null,
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      contractTypeList: [],
      typeList: [],
      dialogFormVisible: false,
      dynamicValidateForm: { names: [] },
      isEdit: false,
    };
  },
  mounted() {
    this.getContractTypeList();
  },
  methods: {
    resetData() {
      this.isEdit = false;
      this.dialogFormVisible = false;
      this.dynamicValidateForm = { names: [], name: "" };
      this.$refs.form.resetFields();
    },
    edit(data) {
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.dynamicValidateForm = { ...data };
    },
    getContractTypeList(data) {
      const params = {
        companyId: this.companyId || this.$store.getters.companyId,
        ...this.contractTypeQuey,
        ...data,
      };
      selectContractTypeList(params).then((res) => {
        if (res.success) {
          this.contractTypeList = res.data.list.map((item) => {
            return { ...item, state: parseInt(item.state) === 0 };
          });
          this.total = res.data.total;
        } else {
          this.contractTypeList = [];
          this.total = 0;
        }
      });
    },
    update(data) {
      if (this.$refs.form) {
        const params = {
          companyId: this.companyId || this.$store.getters.companyId,
          ...data,
        };
        !Number.isInteger(data.state) && (params.state = Number(!data.state));
        updateContractType(params).then((res) => {
          if (res.success) {
            this.$message.success("修改成功");
            this.dialogFormVisible && (this.dialogFormVisible = false);
            this.getContractTypeList();
          }else{
            this.$message.error(res.msg);
          }
        });
      }
    },
    updateState(data) {
      const params = {
        companyId: this.companyId || this.$store.getters.companyId,
        ...data,
      };
      !Number.isInteger(data.state) && (params.state = Number(!data.state));
      updateContractTypeState(params).then((res) => {
        if (res.success) {
          this.$message.success("修改成功");
          // this.dialogFormVisible && (this.dialogFormVisible = false)
          this.getContractTypeList();
        }
      });
    },
    addContractType() {
      this.$refs.form.validate((valida) => {
        if (valida) {
          const data = {
            state: 0, //默认开启,
            companyId: this.companyId || this.$store.getters.companyId,
          };
          let params = [
            {
              ...data,
              name: this.dynamicValidateForm.name,
            },
          ];
          if (this.dynamicValidateForm.names.length) {
            params = params.concat(
              this.dynamicValidateForm.names.map((name) => {
                return { ...data, name: name.value };
              })
            );
          }
          insert(params).then((res) => {
            if (res.success) {
              this.$message.success("添加成功");
              this.resetData();
              this.getContractTypeList();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    //查询
     qurey() {
      this.contractTypeQuey.pageNum = 1
      this.getContractTypeList();
    },
    //重置
    reset() {
      this.contractTypeQuey.name = null
      this.contractTypeQuey.pageNum = 1
      this.getContractTypeList()
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  padding: 15px;

  .header {
    margin-bottom: 10px;
  }

  .footer {
    text-align: right;
  }
}
</style>
