<template>
  <div id="mechanism">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <table-list
      rowKey="id"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
      @addClick="addClick"
    >
      <template slot="status" slot-scope="props">
        <el-popover placement="right" width="650" trigger="click">
          <el-table border :data="props.scope.row.accountList">
            <el-table-column
              type="index"
              label="序号"
              width="70"
              align="center"
              header-align="center"
            >
            </el-table-column>
            <el-table-column
              width="120"
              property="openingBank"
              label="开户银行"
              align="center"
            ></el-table-column>
            <el-table-column
              width="180"
              property="openingName"
              label="开户名称"
              align="center"
            ></el-table-column>
            <el-table-column
              property="proceedsAccount"
              label="收款账号"
              align="center"
            ></el-table-column>
          </el-table>
          <el-button
            slot="reference"
            type="text"
            :disabled="
              !props.scope.row.accountList ||
              props.scope.row.accountList.length === 0
            "
            >查看</el-button
          >
        </el-popover>
      </template>
      <template slot="domainName" slot-scope="props">
        <p>移动端：{{ props.scope.row.hostH5 }}</p>
        <p>电脑端：{{ props.scope.row.hostPc }}</p>
      </template>
      <template slot="accountPeriodSetting" slot-scope="props">
        <p>
          {{ getBillType(props.scope.row.billType) }}，次月{{
            props.scope.row.billDay || " "
          }}日
        </p>
      </template>
      <template slot="invoiceInformation" slot-scope="props">
        <p>
          发票类型：<span v-if="props.scope.row.invoiceBo !== null">
            {{
              props.scope.row.invoiceBo["invoiceType"] === 1
                ? "普票"
                : props.scope.row.invoiceBo["invoiceType"] === 2
                ? "专票"
                : ""
            }}</span
          >
        </p>
        <p>
          发票抬头：<span v-if="props.scope.row.invoiceBo !== null">{{
            props.scope.row.invoiceBo["invoice"]
          }}</span>
        </p>
        <p>企业名称：{{ props.scope.row.tenantName }}</p>
        <p>
          纳税人：<span v-if="props.scope.row.invoiceBo !== null">{{
            props.scope.row.invoiceBo["taxpayer"]
          }}</span>
        </p>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="addClick(props.scope.row)"
          >修改</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search"
    />
    <dislog
      :dialogVisible.sync="dialogVisible"
      @search="search"
      :activeData="activeData"
    ></dislog>
  </div>
</template>

<script>
import dislog from "./dislog.vue";
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  name: "Mechanism",
  components: { searchBoxNew, tableList, pagination, dislog },
  data() {
    return {
      loading: false,
      navText: {
        title: "机构列表",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: false,
        custom: false,
      },
      formList: [
        {
          prop: "tenantid",
          placeholder: "请选择机构名称",
          scope: "systemtenantlist",
        },
      ],
      formData: {},
      tableSet: [
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "网站域名",
          prop: "address",
          hidden: true,
          scope: "solt",
          soltName: "domainName",
        },
        {
          label: "账期设置",
          prop: "address",
          hidden: true,
          scope: "solt",
          soltName: "accountPeriodSetting",
        },
        {
          label: "分成模式",
          prop: "divideModel",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "机构分成",
              value: 1,
            },
            {
              label: "业务员分成",
              value: 2,
            },
          ],
        },
        {
          label: "是否有商户号",
          prop: "commercialTenant",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "是",
              value: 1,
            },
            {
              label: "否",
              value: 0,
            },
          ],
        },
        {
          label: "银行账号信息",
          prop: "accountList",
          hidden: true,
          scope: "solt",
          soltName: "status",
        },
        {
          label: "发票信息",
          prop: "address",
          hidden: true,
          scope: "solt",
          soltName: "invoiceInformation",
        },
      ],
      tableData: [],
      total: 0,
      dialogVisible: false,
      activeData: {},
    };
  },
  created() {
    this.search(2);
  },
  methods: {
    getBillType(e) {
      var a = "";
      switch (e) {
        case 1:
          a = "月份";
          break;
        case 2:
          a = "季度";
          break;
        case 3:
          a = "半年";
          break;
        case 4:
          a = "年度";
          break;

        default:
          break;
      }
      return a;
    },
    addClick(data) {
      this.activeData = data || {};
      this.dialogVisible = true;
    },
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      this.$api
        .systemtenantlist(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search(2);
    },
    del(v) {
      this.$alert(
        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
        "提示",
        {
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
