<template>
  <el-drawer :visible.sync="visible" size="60%" @closed="closed" title="配置">
    <div class="company-config" v-loading="loading">
      <div>

        <div ref="configTitle" class="company-config-title">
          <span>服务配置 <span class="companyConfig-title-tip">提示：</span><span class="companyConfig-title-text">修改配置后，提醒企业重新登录账号（不可刷新）才可更改状态。</span></span>

          <div class="company-config-title-tool"></div>
        </div>
        <el-table :data="configData" border>
          <div slot="empty">请在右上角添加新服务</div>
          <el-table-column label="产品" prop="name"> </el-table-column>
          <el-table-column label="状态">
            <template v-slot="{ row }">
              <span>{{ typeText[row.type].label[row.value] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button size="small" type="text" @click="configSubmit(row, row.value)"
                v-if="row.value != 2 && row.type!=6">
                {{ typeText[row.type].btn[row.value] }}
              </el-button>

              <el-button size="small" type="text" @click="configPay(row, 'free')"
                v-if="row.type == 4 && row.value != 2">免缴
              </el-button>
              <el-button size="small" type="text" @click="configPay(row, 'yes')" v-if="row.type == 4 && row.value == 2">
                已缴
              </el-button>

              <el-button size="small" type="text" @click="configPay(row, 'no')"
                v-if="row.type == 4 && row.value == 2">未缴
              </el-button>

              <!--启用电子合同按钮-->
              <el-button size="small" type="text" @click="configOpenElec(row)" v-if="row.type == 6 && row.value == 0">
                启用
              </el-button>
              <el-button size="small" type="text" @click="configSubmit(row)" v-if="row.type == 6 && row.value == 1">
                关闭
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div class="company-config-title">
          <span>服务费信息</span>
          <div class="company-config-title-tool">
            <el-button type="text" icon="el-icon-circle-plus-outline" @click="serviceVisible = true">添加新服务</el-button>
          </div>
        </div>
        <el-table :data="serviceData" border>
          <div slot="empty">请在右上角添加新服务</div>
          <el-table-column label="产品">
            <template>灵活用工</template>
          </el-table-column>
          <el-table-column label="服务费" prop="serveCost">
            <template v-slot="{ row }">{{ moneyFormat(row.serveCost) }}元</template>
          </el-table-column>
          <el-table-column label="状态" prop="isEnabled">
            <template v-slot="{ row }">
              <span v-if="row.isEnabled === 0">停用</span>
              <span v-else-if="row.isEnabled === 1">启用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button size="small" type="text" :disabled="row.isEnabled === 1" @click="serverEnable(row)">启用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div class="company-config-title">
          <span>操作记录</span>
        </div>
      </div>
      <company-config-record :data="record"></company-config-record>
    </div>

    <el-dialog :visible.sync="serviceVisible" append-to-body @closed="serviceClosed">
      <avue-form ref="serviceForm" v-model="serviceForm" :option="serviceOption" @reset-change="emptytChange"
        @submit="serviceSubmit">
        <template v-slot:id>
          <span>灵活用工</span>
        </template>
      </avue-form>
    </el-dialog>
  </el-drawer>
</template>

<script>
  import { moneyFormat, toCent } from "@/util/money";
  import {
    getConfig,
    setConfig,
    addService,
    serviceEnable,
    whetherSignService,
  } from "@/api/manage/company";
  import lodash from "lodash";
  import companyConfigRecord from "./companyConfigRecord";
  import { getConfigList } from "@/api/manage/companyRecord";
  import Axios from "axios";

  export default {
    components: { companyConfigRecord },
    props: {},
    data() {
      const common = { 0: "停用", 1: "启用" };
      const commonBtnText = { 0: "启用", 1: "停用" };

      const trial = { 0: "已缴", 1: "未缴", 2: "免缴" };
      const trialBtnText = { 0: "未缴", 1: "已缴" };

      const contract = { 0: "未签", 1: "已签" };
      const contractBtnText = { 0: "已签", 1: "未签" };

      const elecContract = { 0: "关闭", 1: "启用" }
      const elecContractBtnText = { 0: "启用", 1: "关闭" }

      const typeText = {
        "-1": { label: common, btn: commonBtnText },
        1: { label: common, btn: commonBtnText },
        2: { label: common, btn: commonBtnText },
        3: { label: common, btn: commonBtnText },
        4: { label: trial, btn: trialBtnText },
        5: { label: contract, btn: contractBtnText },
        6: { label: elecContract, btn: elecContractBtnText }
      };

      return {
        typeText,
        loading: true,
        visible: false,
        configVisible: false,
        serviceVisible: false,
        companyId: null,
        tenantId: null,
        configForm: {},
        serviceForm: {},
        record: [],
        serviceOption: {
          menuPosition: "right",
          labelWidth: 120,
          column: [
            {
              type: "select",
              label: "产品",
              prop: "id",
              formslot: true,
              span: 24,
            },
            {
              type: "number",
              label: "服务费金额",
              prop: "serveCost",
              precision: 2,
              rules: [{ required: true, message: "请输入服务费金额" }],
              span: 24,
            },
            {
              type: "select",
              label: "计量单位",
              prop: "serveUnit",
              dataType: "number",
              dicData: [{ value: 0, label: "元/人·次" }],
              rules: [{ required: true, message: "请选择计量单位" }],
              span: 24,
            },
          ],
        },
        configData: [],
        serviceData: [],
        height: 0,
      };
    },
    computed: {},
    mounted() { },
    methods: {
      serviceSubmit(form, done) {
        form.serveCost = toCent(form.serveCost);
        form.companyId = this.companyId;
        form.tenantId = this.tenantId;
        addService(form)
          .then(() => {
            this.$message({ type: "success", message: "操作成功！" });
            this.getConfig();
            this.serviceVisible = false;
            done();
          })
          .catch(() => {
            done();
          });
      },
      configSubmit(row) {
        const data = lodash.cloneDeep(row);
        data.value = data.value ? 0 : 1;
        setConfig(data)
          .then(() => {
            this.$message({ type: "success", message: "操作成功！" });
            this.getConfig();
          })
          .catch(() => {
            this.getConfig();
          });
      },
      /*免缴保证金*/
      configPay(row, type) {
        const data = lodash.cloneDeep(row);
        if (type == "free") {//免缴--2
          data.value = 2;
        } else if (type == "yes") {//已缴 --0
          data.value = 0;
        } else if (type == "no") {//未缴--1
          data.value = 1;
        }

        setConfig(data)
          .then(() => {
            this.$message({ type: "success", message: "操作成功！" });
            this.getConfig();
          })
          .catch(() => {
            this.getConfig();
          });
      },
      /*开启电子合同服务*/
      configOpenElec(row) {
        whetherSignService(this.companyId).then((res) => {
          if (res.data.data) {
            const data = lodash.cloneDeep(row);
            data.value = 1;
            setConfig(data)
              .then(() => {
                this.$message({ type: "success", message: "操作成功！" });
                this.getConfig();
              })
              .catch(() => {
                this.getConfig();
              });
          }
          else {
            this.$message.error('企业未开通【电子签章】，不能开启【电子合同】')
          }

        }).catch((error) => {
          this.$message.error(error)
        })
      },
      closed() {
        this.$emit("success");
        this.loading = true;

        this.serviceClosed();
      },
      serviceClosed() {
        this.$refs.serviceForm && this.$refs.serviceForm.resetForm();
      },
      open(companyId, tenantId) {
        this.companyId = companyId;
        this.tenantId = tenantId;
        this.visible = true;
        this.getConfig();
      },
      getConfig() {
        this.loading = true;
        Axios.all([
          getConfigList(this.companyId),
          getConfig(this.companyId),
        ]).then(
          Axios.spread((record, config) => {
            this.record = record.data.data;
            this.configData = config.data.data.config;
            this.serviceData = config.data.data.fee;
            this.loading = false;
          })
        );
      },
      serverEnable(row) {
        this.loading = true;
        serviceEnable(row.id, this.companyId)
          .then(() => {
            this.$message({ type: "success", message: "操作成功！" });
            this.getConfig();
          })
          .catch(() => {
            this.getConfig();
          });
      },
      moneyFormat,
    },
  };
</script>

<style>
  .company-config-title {
    font-size: 18px;
    line-height: 40px;
    height: 40px;
  }

  .company-config-title-tool {
    float: right;
  }
  .companyConfig-title-tip{
    font-size: 14px;
    color: red;
  }
  .companyConfig-title-text{
    font-size: 14px;
  }
</style>
