<template>
  <el-dialog title="查看客户" :visible.sync="visible" width="75%" :append-to-body="true" :modal-append-to-body="true"
    top="10vh !important">
    <div class="select-cnt">
      <p v-if="cardType === 'featured'">
        <span>区域名称: </span>
        <span>{{ detailInfo.shapeName }}</span>
      </p>
      <template v-else>
        <p v-if="level === '4'">
          <span>镇/街道: </span>
          <span>{{ detailInfo.town }}</span>
        </p>
        <p v-else>
          <span>村/社区: </span>
          <span>{{ detailInfo.label }}</span>
        </p>
      </template>
      <p>
        <span>区域规模: </span>
        <span>{{ detailInfo.areades }}</span>
      </p>
    </div>
    <div class="tabbox">
      <el-radio-group v-model="selectedTab" size="small" @change="handleTabChange">
        <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">
          企业
        </el-radio-button>
        <el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">
          个人
        </el-radio-button>
        <el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">
          商户
        </el-radio-button>
      </el-radio-group>
    </div>
    <common-table v-loading="pageLoading" :table-data="tableData" :table-coloumns="tableColoumns"
      :page-size="pageInfo.pageSize" :pagination="true" :total-rows="pageInfo.total" :current-page="pageInfo.pageNum"
      :isShowFilter="true" @onPageChange="onPageChange" @onSizeChange="onSizeChange" maxHeight="580">
      <template #operate="scope">
        <el-button type="text" @click="goDetail(scope.row)">{{ scope.row.custName }}</el-button>
      </template>
    </common-table>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onOk">确 定</el-button>
    </div> -->
  </el-dialog>
</template>

<script>
import { getCustList, shapeCustList } from "@/api/grid/draw-area";
import CommonTable from "@/components/Common/common-table";
import { mapGetters } from 'vuex'

export default {
  components: {
    CommonTable,
  },
  props: {
    modalTitle: {
      type: String,
      default: "",
    },
    detailInfo: {
      type: Object,
      default: () => ({}),
    },
    cardType: {
      type: String,
      default: "",
    },
    level: {
      type: String,
      default: "4",
    },
    btnType: {
      type: String,
      default: "1",
    },
  },
  watch: {
    visible(val) {
      if (!val) return
      if (this.isPrivate) {
        this.selectedTab = '0'
        this.pageInfo.pageNum = 1
        this.pageInfo.pageSize = 10
        this.pageInfo.total = 0
      } else {
        this.selectedTab = '2'
        this.pageInfo.pageNum = 1
        this.pageInfo.pageSize = 10
        this.pageInfo.total = 0
      }
      this.getInitData();
    }
  },
  computed: {
    ...mapGetters(['roles']),
    isPublic() {
      return this.roles.includes('headPublic')
    },
    isPrivate() {
      return this.roles.includes('headPrivate')
    }
  },
  data() {
    return {
      visible: false,
      statusType: "",
      pageLoading: false,
      tableData: [],
      tableColoumns: [
        {
          prop: "custType",
          label: "客户类型",
          align: "left",
        },
        {
          prop: "custName",
          label: "客户名称",
          align: "left",
          type: 'slot',
          slotType: 'operate',
          width: '200px',
        },
        {
          prop: "addressName",
          label: "使用地址",
          align: "left",
        },
        {
          prop: "province",
          label: "省",
          align: "left",
        },
        {
          prop: "city",
          label: "市",
          align: "left",
        },
        {
          prop: "county",
          label: "县区",
          align: "left",
        },
        {
          prop: "street",
          label: "镇/街道",
          align: "left",
        },
        {
          prop: "community",
          label: "村/社区",
          align: "left",
        },
        {
          prop: "addressDetail",
          label: "详细地址",
          align: "left",
        },
      ],
      pageInfo: {
        pageSize: 5,
        pageNum: 1,
        total: 0,
      },
      selectedTab: '2'
    };
  },
  methods: {
    async getInitData() {
      let API = "",
        params = "";
      if (this.cardType === "featured") {
        API = shapeCustList;
        params = this.detailInfo.shapeId;
      } else {
        API = getCustList;
        params = this.detailInfo.code;
      }
      const res = await API(params, {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        custType: this.selectedTab
      });
      if (res.code === 200) {
        this.pageInfo.total = res.total;
        this.tableData = res.rows;
      }
      // console.log(res, "-----");
    },
    handleTabChange(val) {
      this.pageInfo.pageNum = 1
      this.pageInfo.pageSize = 10
      this.pageInfo.total = 0
      this.getInitData()
    },
    onSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.onPageChange(1);
    },
    onPageChange(page) {
      this.pageInfo.pageNum = page;
      this.getInitData();
    },
    onClose() {
      this.visible = false;
      this.pageInfo = {
        pageSize: 5,
        pageNum: 1,
        total: 0,
      };
    },

    onOk() {
      this.onClose();
    },
    onOpen() {
      this.visible = true;
    },
    goDetail(row) {
      if (this.selectedTab == '0') {
        this.$router.push({
          path: '/360charts/indexcharts',
          query: {
            custId: row.custId,
            level:this.level,
            btnType:this.btnType,
            backUrl:'/grid/create/draw-area'
          }
        })
      } else if (this.selectedTab == '1') {
        this.$router.push({
          path: '/360charts/commercial/',
          query: {
            custId: row.custId,
            level:this.level,
             btnType:this.btnType,
            backUrl:'/grid/create/draw-area'
          }
        })
      } else if (this.selectedTab == '2') {
        this.$router.push({
          path: '/360charts/firm/',
          query: {
            custId: row.custId,
            level:this.level,
             btnType:this.btnType,
            backUrl:'/grid/create/draw-area'
          }
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.select-cnt {
  display: flex;
  align-items: center;
  margin-bottom: 24px;

  p {
    margin-right: 20px;
  }

  >span {
    display: inline-block;
    width: 56px;
  }

  .el-select {
    flex: 1;
  }
}

::v-deep .el-table__body-wrapper {
  max-height: 50vh;
  overflow-y: auto;
}

.tabbox {
  display: flex;
  flex-direction: row;
  // justify-content: center;
  margin-bottom: 10px;

  ::v-deep .el-radio-button--small .el-radio-button__inner {
    padding: 9px 40px;
  }
}
</style>