<template>
  <div class="agreement-main">
    <a-row class="insurer-list">
      <a-button shape="circle" icon="left" class="left btn" @click="prev">
      </a-button>
      <a-col
        :span="5"
        v-for="item in companyList.slice(
          (this.companyPage.page - 1) * this.companyPage.size,
          this.companyPage.size * this.companyPage.page
        )"
        :key="item.insuranceCompanyId"
        @click="chooseInsurer(item)"
      >
        <div
          class="insurer"
          :class="insurerId === item.insuranceCompanyId ? 'on' : 'insurer'"
        >
          <div>
            <img :width="50" :height="50" :src="item.logo" />
          </div>
          <div>
            <p>{{ item.namesimple }}</p>
            <!-- <p>保险公司</p>  -->
          </div>
        </div>
      </a-col>
      <a-button shape="circle" icon="right" class="right btn" @click="next">
      </a-button>
    </a-row>
    <div class="main">
      <fromRow :formState="formState" @getList="search" :showTab="3"> </fromRow>
      <a-form layout="inline" :model="formState" class="form">
        <a-form-item label="是否有效" :labelCol="{ span: 6 }" :colon="false">
          <a-select
            placeholder="请选择"
            v-model="formState.validStatus"
            allowClear
            :filter-option="filterOption"
            style="width: 200px"
          >
            <a-select-option value="1">
              {{ "有效" }}
            </a-select-option>
            <a-select-option value="0">
              {{ "无效" }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否启用" :labelCol="{ span: 6 }" :colon="false">
          <a-select
            placeholder="请选择"
            v-model="formState.isEenabled"
            allowClear
            :filter-option="filterOption"
            style="width: 200px"
          >
            <a-select-option value="1">
              {{ "启用" }}
            </a-select-option>
            <a-select-option value="0">
              {{ "禁用" }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="对接人" :labelCol="{ span: 6 }" :colon="false">
          <a-input
            placeholder="请输入对接人"
            v-model="formState.dockingPerson"
            allowClear
          ></a-input>
        </a-form-item>
      </a-form>
      <standard-table
        bordered
        :columns="columns"
        :dataSource="tableList"
        :pagination="pagination"
        @clear="onClear"
        @change="onChange"
        :loading="loading"
      >
        <div slot="validStatus" slot-scope="{ record }">
          <!-- {{text}} -->
          <a-tag
            v-if="record.validStatus == 1"
            style="
              background: rgba(120, 148, 242, 0.2);
              border-radius: 2px 2px 2px 2px;
              border: 1px solid #7894f2;
              color: #2a55e5;
            "
            >有效</a-tag
          >
          <a-tag v-else>无效</a-tag>
        </div>
        <div slot="isEenabled" slot-scope="{ record }">
          <a-tag
            v-if="record.isEenabled == 1"
            type="primary"
            style="
              background: linear-gradient(180deg, #66cdbb 0%, #33a08d 100%);
              border-radius: 4px 4px 4px 4px;
              color: #fff;
            "
            >启用</a-tag
          >
          <a-tag v-else style="background: #f5f5f5; border: 0">禁用</a-tag>
        </div>

        <!-- {{text }} -->
        <!-- <a-button v-show="text" size="small">查看</a-button>-->

        <!-- <router-link :class="text" >查看</router-link> -->

        <!-- <template slot="status">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template> -->
      </standard-table>
    </div>
  </div>
</template>


<script>
import StandardTable from "@/components/table/StandardTable";
import fromRow from "@/components/form/FormRow";
const columns = [
  {
    title: "协议代码",
    dataIndex: "agreeId",
    width: "100px",
  },
  {
    title: "协议描述",
    dataIndex: "agreeName",
    scopedSlots: { customRender: "agreeName" },
  },
  {
    title: "协议简称",
    dataIndex: "agreeSimpleName",
    // sorter: true,
    needTotal: true,
  },
  {
    title: "合作公司",
    dataIndex: "partnerCompaniesName",
    needTotal: true,
    slots: { title: "statusTitle" },
  },
  {
    title: "协议说明",
    dataIndex: "agreementName",
  },
  {
    title: "协议起期",
    dataIndex: "agreeStartDate",
    width: "120px",
  },
  {
    title: "协议止期",
    dataIndex: "agreeEndDate",
    width: "120px",
  },
  {
    title: "签署日期",
    dataIndex: "createTime",
    width: "120px",
  },
  {
    title: "是否有效",
    dataIndex: "validStatus",
    scopedSlots: { customRender: "validStatus" },
    width: "100px",
  },
  {
    title: "是否启用",
    dataIndex: " isEenabled",
    scopedSlots: { customRender: "isEenabled" },
    width: "100px",
  },
  {
    title: "对接人",
    dataIndex: "dockingPerson",
    width: "100px",
  },
  // {
  //   title: "操作",
  //   scopedSlots: { customRender: "action" },
  //   width: "100px",

  //   fixed: "right",
  // },
];
// import CryptoJS from "crypto-js";
export default {
  components: {
    StandardTable,
    fromRow,
  },
  data() {
    return {
      formState: {
        whole: undefined,
        cityId: undefined,
        countyId: undefined,
        houseId: undefined,
        provinceId: undefined,
      },
      insurerId: "",
      advanced: true,
      columns: columns,
      tableList: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      companyList: [],
      companyPage: {
        page: 1,
        size: 15,
        total: 0,
        perPage: 0,
      },
      loading: true,
      // list:[]
    };
  },
  created() {
    this.getCompanyList();
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      let url = this.getnewurl();
      window.history.replaceState(null, null, url);
    });
  },
  methods: {
    search() {
      this.pagination.current = 1;
      this.getList();
    },
    getnewurl() {
      let url = document.location.href;
      let reg = /[^\w](token|uid)=?([^&|^#]*)/g;
      url = url.replace(reg, "");
      reg = /&&/g;
      url = url.replace(reg, "");
      reg = /&#/g;
      url = url.replace(reg, "#");
      reg = /\?#/g;
      url = url.replace(reg, "#");
      // url = url.replaceAll(document.domain,"");
      // url = url.replaceAll("http://","");
      // url = url.replaceAll("https://","");
      reg = /\?#/g;
      url = url.replace(reg, "#");
      return url;
    },

    prev() {
      if (this.companyPage.page != 1) this.companyPage.page -= 1;
    },
    next() {
      this.companyPage.page += 1;
      // this.getCompanyList();
      if (this.companyPage.page >= this.companyPage.perPage) {
        this.companyPage.page = this.companyPage.perPage;
      }
    },
    chooseInsurer(item) {
      if (this.insurerId == item.insuranceCompanyId) {
        this.insurerId = "";
        this.pagination.current = 1;
        this.pagination.defaultPageSize = 10;
        this.getList();
        return;
      }
      this.insurerId = item.insuranceCompanyId;

      // console.log(item,this.insurerId)
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.getList();
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },

    onChange(pagination) {
      // this.$message.info('表格状态改变了')
      // console.log(pagination, filters, sorter, { currentDataSource });
      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$API.agreement
        .getAgreementList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          insuranceCompanyId: this.insurerId,
          ...this.formState,
        })
        .then((res) => {
          if (res.data.code === 200) {
            // console.log(res)

            this.tableList = res.data.data.content;
            // setTimeout(() => {
            this.loading = false;

            // }, 1000);
            this.pagination = {
              current: res.data.data.pageNum,
              defaultPageSize: res.data.data.pageSize,
              total: res.data.data.totalSize,
            };
          }
        });
    },
    getCompanyList() {
      this.$API.agreement
        .getCompanyList({
          areaId: "",
          deptId: "",

          partnerCompaniesId: "",
          warningDay: "",
          warningStatus: "",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.companyList = res.data.data;

            this.companyPage.perPage = Math.ceil(
              res.data.data.length / this.companyPage.size
            );

            // console.log(this.companyPage);
            this.companyPage.total = res.data.data.length;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.agreement-main {
  display: flex;
  flex-direction: column;
}
.standard-table {
  flex: 1;
}
.main {
  background: #fff;
  .ant-form {
    padding: 15px;
    box-sizing: border-box;
  }
  .ant-form.form {
    padding-top: 0;
  }
}
.insurer-list {
  // display:flex;
  // flex-wrap: wrap;
  width: 100%;
  // justify-content: stretch;
  position: relative;
  padding: 0px 35px;

  box-sizing: border-box;
  .btn {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .btn.left {
    left: 20px;
  }
  .btn.right {
    right: -10px;
  }
  .ant-col {
    height: 90px;
    flex: none;
    // width: 18%;
    padding: 5px 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    width: 20%;
  }

  .insurer {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 0 15px;
    > a-image {
      display: block;
    }
    p {
      margin: 0;
    }
    > div:first-child {
      // background: #000;
      width: 50px;
      height: 50px;
    }
    > div:last-child {
      padding-left: 30px;
      box-sizing: border-box;
      font-size: 16px;
      font-style: "PingFang SC-Medium";
      color: #181818;
    }
  }
  .on {
    background: #f9faff;
    box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
    border-radius: 8px 8px 8px 8px;
    border: 2px solid #2a55e5;
  }
}
</style>