<template>
  <div id="supplierSettlement">
    <search-box-new
      class="search_box_page"
      ref="searchBox"
      :redIcon="false"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <picture-list
      ref="pictureList"
      :info="statisticsData"
      :list="showTabList"
    ></picture-list>
    <table-list
      rowKey="settleId"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="customize"
        ><el-popover title="结算方式" width="200" trigger="click">
          <div>
            <el-button
              size="small"
              type="primary"
              @click="controlsType(1, { settleType: 1 })"
              >数量结算</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="controlsType(1, { settleType: 2 })"
              >时间结算</el-button
            >
          </div>
          <el-button
            slot="reference"
            size="small"
            type="primary"
            style="margin-right: 10px"
            >添加记录</el-button
          >
        </el-popover>
        <el-button size="small" type="primary" @click="batchAudit"
          >批量提交审核</el-button
        >
        <el-button size="small" type="warning" @click="batchDel"
          >批量删除</el-button
        >
        <!-- <el-button size="small" v-hasRole="derivePermission"
          >导出excel</el-button
        > -->
      </template>
      <template slot="orderPrice" slot-scope="props">
        <div v-if="props.scope.row['settleMoney']">
          ￥{{ $methodsTools.decimalPoint(props.scope.row["settleMoney"]) }}
        </div>
      </template>
      <template slot="bank" slot-scope="props">
        <div>开户名：{{ props.scope.row.bankName }}</div>
        <div>开户银行：{{ props.scope.row.bank }}</div>
        <div>收款账号：{{ props.scope.row.bankAccount }}</div>
      </template>
      <template slot="status" slot-scope="props">
        {{ getCheckStatus(props.scope.row.checkStatus) }}
        <span style="color: red" v-if="props.scope.row.checkRole && props.scope.row.checkStatus !== 6"
          >（{{ props.scope.row.checkRole }}）</span
        >
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="controlsType(0, props.scope.row)"
          >详情</el-button
        >
        <el-button
          type="text"
          :disabled="
            !(
              ($store.state.user.name == 'admin' &&
                (props.scope.row.checkStatus == 2 ||
                  props.scope.row.checkStatus == 7)) ||
              (props.scope.row.checkStatus == 4 &&
                props.scope.row.paySign == 1) ||
              props.scope.row.checkStatus == 7
            )
          "
          @click="controlsType(3, props.scope.row)"
          >{{ props.scope.row.checkStatus == 4 ? "支付" : "审核" }}</el-button
        >
        <el-button
          type="text"
          :disabled="
            !(
              (props.scope.row.checkStatus == 1 ||
                props.scope.row.checkStatus == 3) &&
              ($store.state.user.userId == props.scope.row.createUserId ||
                $store.state.user.name == 'admin')
            )
          "
          @click="controlsType(2, props.scope.row)"
          >修改</el-button
        >
        <el-button
          type="text"
          class="warning_text_btn"
          :disabled="
            !(
              (props.scope.row.checkStatus == 1 ||
                props.scope.row.checkStatus == 3) &&
              ($store.state.user.userId == props.scope.row.createUserId ||
                $store.state.user.name == 'admin')
            )
          "
          @click="del([props.scope.row.settleId])"
          >删除</el-button
        >
        <!-- :disabled="props.scope.row.checkStatus !== 6" -->
        <el-button
          :disabled="props.scope.row.checkStatus !== 6"
          type="text"
          class="warning_text_btn"
          @click="doPrint(1, props.scope.row)"
          >单据打印</el-button
        >
        <el-button
        v-if="props.scope.row.settleType == 1"
          :disabled="props.scope.row.checkStatus !== 6"
          type="text"
          class="warning_text_btn"
          @click="doPrint(2, props.scope.row)"
          >明细打印</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search"
    />

    <BaseDialogQuantity
      :dialogVisible.sync="BaseDialogQuantity"
      :activeData="activeData"
      @openSupplier="openSupplier"
    />
    <BaseDialogQuantityTable
      :dialogVisible.sync="BaseDialogQuantityTable"
      :activeData="activeData"
      @search="search"
      @lastStep="lastStep"
    />
    <BaseDialogTime
      :activeData="activeData"
      :dialogVisible.sync="BaseDialogTime"
      @search="search"
    />
    <BaseDialogDetailsTime
      :dialogVisible.sync="BaseDialogDetailsTime"
      :activeData="activeData"
    />
    <payMent
      :dialogVisible.sync="BaseDialogPayMent"
      :activeData="activeData"
      @search="search"
    />
    <printData
      :dialogVisible.sync="BaseDialogPrintData"
      :activeData="activeData"
    />
  </div>
</template>

<script>
import BaseDialogQuantity from "./quantitySettleMent/index.vue";
import BaseDialogQuantityTable from "./quantitySettleMent/quantityTable.vue";
import BaseDialogTime from "./timeSettleMent/index.vue";
import BaseDialogDetailsTime from "./timeSettleMent/detailsIndex.vue";
import printData from "./printData.vue";
import payMent from "./payMent.vue";
import pictureList from "@/components/Comon/pictureList.vue";
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  name: "SupplierSettlement",
  components: {
    pictureList,
    searchBoxNew,
    tableList,
    pagination,
    BaseDialogQuantity,
    BaseDialogTime,
    BaseDialogDetailsTime,
    BaseDialogQuantityTable,
    payMent,
    printData,
  },
  data() {
    return {
      activeData: {},
      statisticsData: {},
      showTabList: [
        {
          label: "结算金额",
          prop: "settlementAmount",
          img: "未收款",
        },
      ],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "供应商结算",
        index: 0,
        ch: "条",
        num: true,
        choice: true,
        addHide: true,
        openCheckMore: true,
        changeWidth: "310px",
        custom: false,
        backFatherBtn: {
          status: false,
          title: "配置下单填选模板",
        },
      },
      //搜索
      formList: [
        {
          prop: "settleType",
          placeholder: "结算方式",
          scope: "select",
          options: [
            { label: "数量结算", value: 1 },
            { label: "时间结算", value: 2 },
          ],
        },
        {
          prop: "costCatId",
          placeholder: "成本分类",
          scope: "topinstcategoryList",
        },
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
          schemeName: true,
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "checkStatus",
          placeholder: "审核状态",
          scope: "select",
          options: [
            { label: "待提交", value: 1 },
            { label: "待审核", value: 7 },
            { label: "审核中", value: 2 },
            { label: "未通过", value: 3 },
            { label: "待支付", value: 4 },
            { label: "支付失败", value: 5 },
            { label: "已结算", value: 6 },
            { label: "支付中", value: 8 },
          ],
        },
        {
          placeholder: "时间",
          prop1: "startTime",
          prop2: "endTime",
          placeholder1: "开始日期",
          placeholder2: "结束日期",
          scope: "moreDataPicker",
          Diszing: true,
        },
        {
          prop: "title",
          placeholder: "输入标题",
        },
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet: [
        {
          label: "添加时间",
          prop: "createTime",
          hidden: true,
          scope: "aTimeList",
        },
        {
          label: "标题",
          prop: "title",
          hidden: true,
        },
        {
          label: "备注",
          prop: "remark",
          hidden: true,
        },
        {
          label: "结算方式",
          prop: "settleType",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "数量结算",
              value: 1,
            },
            {
              label: "时间结算",
              value: 2,
            },
          ],
        },
        {
          label: "教育类型",
          prop: "educationName",
          hidden: true,
        },
        {
          label: "培训项目",
          prop: "businessName",
          hidden: true,
        },
        {
          label: "结算金额",
          hidden: true,
          scope: "solt",
          soltName: "orderPrice",
        },
        {
          label: "供应商",
          prop: "instName",
          hidden: true,
        },
        {
          label: "收款信息",
          hidden: true,
          scope: "solt",
          soltName: "bank",
        },
        {
          label: "审核状态",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "审核时间",
          prop: "checkTime",
          hidden: true,
          scope: "aTimeList",
        },
        {
          label: "审核意见",
          hidden: true,
          scope: "checkReason",
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      BaseDialogQuantity: false,
      BaseDialogTime: false,
      BaseDialogDetailsTime: false,
      BaseDialogQuantityTable: false,
      BaseDialogPayMent: false,
      BaseDialogPrintData: false,
    };
  },
  created() {
    this.search();
    this.getStatistics(this.formData);
  },
  computed: {
    getCheckStatus: function () {
      return function (i) {
        var a = "";
        switch (i) {
          case 1:
            a = "待提交";
            break;
          case 7:
            a = "待审核";
            break;
          case 2:
            a = "审核中";
            break;
          case 3:
            a = "未通过";
            break;
          case 4:
            a = "待支付";
            break;
          case 5:
            a = "支付失败";
            break;
          case 6:
            a = "已结算";
            break;
          case 8:
            a = "支付中";
            break;
          default:
            break;
        }
        return a;
      };
    },
  },
  methods: {
    doPrint(type, data) {
      this.activeData = Object.assign({ type: type }, data) || {};
      this.BaseDialogPrintData = true;
    },
    /**
     * 详情0 新增1 修改2 审核/支付3
     */
    controlsType(type, data) {
      this.activeData = Object.assign({ type: type }, data) || {};
      //数量结算
      if (data.settleType == 1) {
        if (type == 1) {
          this.BaseDialogQuantity = true;
        } else if (type == 3 && data.checkStatus == 4) {
          this.BaseDialogPayMent = true;
        } else {
          this.BaseDialogQuantityTable = true;
        }
      }
      //时间结算
      if (data.settleType == 2) {
        if (type == 0) {
          this.BaseDialogDetailsTime = true;
        } else if (type == 3 && data.checkStatus == 4) {
          this.BaseDialogPayMent = true;
        } else {
          this.BaseDialogTime = true;
        }
      }
    },
    //数量结算进行下一步
    openSupplier(data) {
      this.activeData = Object.assign({ type: 1 }, data) || {};
      this.BaseDialogQuantityTable = true;
    },
    //数量结算返回上一步
    lastStep(data) {
      this.activeData = Object.assign({}, data) || {};
      this.BaseDialogQuantity = true;
    },
    getStatistics(datas) {
      var data = JSON.parse(JSON.stringify(datas));
      delete data.pageNum;
      delete data.pageSize;
      this.$api.settletotalmoney(data).then((res) => {
        this.statisticsData = { settlementAmount: res.data } || {};
      });
    },
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
        this.$nextTick(() => {
          this.$refs.tableList.clearMoreActive();
        });
      }
      if (v === 3) {
        this.$nextTick(() => {
          this.$refs.tableList.clearMoreActive();
        });
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      this.getStatistics(data);
      this.$api
        .settlelist(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search(2);
    },
    batchAudit() {
      if (this.$refs.tableList.allCheckData.length > 0) {
        const A = this.$refs.tableList.allCheckData
          .filter((i) => {
            return (
              (this.$store.state.user.name == "admin" &&
                (i.checkStatus == 2 || i.checkStatus == 7)) ||
              i.checkStatus == 7
            );
          })
          .map((i) => i.settleId);
        if (A.length > 0) {
          this.audit(A);
        } else {
          this.$message.warning("当前所勾选的数据不可审核");
        }
      } else {
        this.$message.warning("请勾选需批量审核的数据");
      }
    },
    audit(ids) {
      this.$confirm("确定批量提交审核？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.settlebatchsubmitcheck(ids).then((res) => {
            this.$message.success("操作成功");
            this.search(3);
          });
        })
        .catch(() => {});
    },
    batchDel() {
      if (this.$refs.tableList.allCheckData.length > 0) {
        const A = this.$refs.tableList.allCheckData
          .filter((i) => {
            return (
              (i.checkStatus == 1 || i.checkStatus == 3) &&
              (this.$store.state.user.userId == i.createUserId ||
                this.$store.state.user.name == "admin")
            );
          })
          .map((i) => i.settleId);
        if (A.length > 0) {
          this.del(A);
        } else {
          this.$message.warning("当前所勾选的数据不可删除");
        }
      } else {
        this.$message.warning("请勾选需要删除的数据");
      }
    },
    del(ids) {
      this.$confirm("确定删除此内容？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.settlebatchdelete(ids).then((res) => {
            this.$message.success("删除成功");
            this.search(3);
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box_page {
  /deep/ .el-select {
    width: 120px;
  }
  /deep/ .el-form-item__content > .el-input {
    width: 190px;
  }
}
.cell > .el-button + .el-button {
  // margin-left: 0px;
}
.warning_text_btn {
  color: rgb(230, 162, 60);
}
.is-disabled {
  color: #c0c4cc;
}
</style>
