<template>
  <div class="main">
    <div class="content">
      <el-radio-group
        class="header-radio"
        v-model="selectedTab"
        @input="handleChange"
      >
        <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 class="searchForm">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
          :inline="true"
        >
          <el-form-item label="柜员名称">
            <el-input
              v-model="searchForm.visName"
              placeholder="请输入"
              @blur="handleSearch"
              clearable
              @clear="handleSearch"
            />
          </el-form-item>
          <el-form-item label="走访时间">
            <el-date-picker
              v-model="searchForm.visTime"
              type="date"
              @change="handleSearch"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="客户证件号" label-width="120" v-if="selectedTab === '0'">
            <el-input
              v-model="searchForm.custIdc"
              placeholder="请输入"
              @blur="handleSearch"
              clearable
              @clear="handleSearch"
            />
          </el-form-item>
          <el-form-item label="企业（商户）统信码" label-width="140" v-else>
            <el-input
              v-model="searchForm.socialCreditCode"
              placeholder="请输入"
              @blur="handleSearch"
              clearable
              @clear="handleSearch"
            />
          </el-form-item>
          <el-form-item label="异常标签" v-if="is875">
            <el-select
              v-model="searchForm.abnormalVisitTag"
              placeholder="请输入"
              @blur="handleSearch"
              clearable
              @clear="handleSearch"
            >
                <el-option label="正常" value="0"></el-option>
                <el-option label="走访频率异常" value="1"></el-option>
                <el-option label="走访持续时长异常" value="2"></el-option>
                <el-option label="签退时间异常" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="common-search-btn"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              size="small"
              class="common-reset-btn"
              type="plain"
              @click="resetFilters"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <section class="operate-cnt">
        <right-toolbar
          @queryTable="handleRefersh"
          :columns="is875 ? [...columns, ...columns875] : columns"
          style="margin-left: auto"
        ></right-toolbar>
      </section>
      <el-table
        :data="tableData"
        style="width: 100%"
        class="tableData"
        v-loading="Loading"
        max-height="600"
      >
        <el-table-column
          align="left"
          prop="campaignName"
          label="活动名称"
          show-overflow-tooltip
          width="150px"
          v-if="columns[0].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="visName"
          label="柜员名称"
          show-overflow-tooltip
          width="150px"
          v-if="columns[1].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="visId"
          label="柜员号"
          show-overflow-tooltip
          width="150px"
          v-if="columns[2].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="deptId"
          label="柜员部门"
          show-overflow-tooltip
          width="150px"
          v-if="columns[3].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="deptName"
          label="部门名称"
          show-overflow-tooltip
          width="200px"
          v-if="columns[4].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="custName"
          label="走访客户名称"
          show-overflow-tooltip
          width="150px"
          v-if="columns[5].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="custIdc"
          label="客户证件号"
          show-overflow-tooltip
          width="200px"
          v-if="columns[6].visible && selectedTab === '0'"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="socialCreditCode"
          label="企业（商户）统信码"
          show-overflow-tooltip
          width="150px"
          v-if="columns[7].visible && selectedTab !== '0'"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="custType"
          label="客户类型"
          show-overflow-tooltip
          v-if="columns[8].visible"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.custType == '0'">个人</span>
            <span v-if="scope.row.custType == '1'">商户</span>
            <span v-if="scope.row.custType == '2'">企业</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          prop="signInTime"
          label="签到时间"
          show-overflow-tooltip
          width="180px"
          v-if="columns[9].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="signOutTime"
          label="签退时间"
          show-overflow-tooltip
          width="180px"
          v-if="columns[10].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="signInAddress"
          label="签到地址"
          show-overflow-tooltip
          width="150px"
          v-if="columns[11].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="signOutAddress"
          label="签退地址"
          show-overflow-tooltip
          width="150px"
          v-if="columns[12].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="signInCoordinate"
          label="签到坐标"
          show-overflow-tooltip
          width="150px"
          v-if="columns[13].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="signOutCoordinate"
          label="签退坐标"
          show-overflow-tooltip
          width="150px"
          v-if="columns[14].visible"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="abnormalVisitTag"
          label="异常走访标签"
          show-overflow-tooltip
          width="150px"
          v-if="columns875[0].visible && is875"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.abnormalVisitTag == '0'">正常</span>
            <span v-if="scope.row.abnormalVisitTag == '1'">走访频率异常</span>
            <span v-if="scope.row.abnormalVisitTag == '2'">走访持续时长异常</span>
            <span v-if="scope.row.abnormalVisitTag == '3'">签退时间异常</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          prop="abnormalVisitInfo"
          label="异常走访信息"
          show-overflow-tooltip
          width="150px"
          v-if="columns875[1].visible && is875"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="isValidCust"
          label="是否为有效客户"
          show-overflow-tooltip
          width="150px"
          v-if="columns[15].visible"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.isValidCust == '0'">否</span>
            <span v-if="scope.row.isValidCust == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          prop="remark"
          label="走访备注"
          show-overflow-tooltip
          width="150px"
          v-if="columns[16].visible"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="->,total,prev,pager,next,sizes"
        :total="total"
        :current-page="pageNum"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getPADVisitRecord } from "@/api/task/PADvisitRecord.js";
import { Message } from "element-ui";
export default {
  data() {
    return {
      selectedTab: "0",
      tableData: [],
      Loading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      searchForm: {
        visName: "",
        visTime: "",
        custIdc: "",
        socialCreditCode: '',
        abnormalVisitTag: ''
      },
      campsourceList: [],
      columns: [
        { key: 0, label: "活动名称", visible: true },
        { key: 1, label: "柜员名称", visible: true },
        { key: 2, label: "柜员号", visible: true },
        { key: 3, label: "柜员部门", visible: true },
        { key: 4, label: "部门名称", visible: true },
        { key: 5, label: "走访客户名称", visible: true },
        { key: 6, label: "客户证件号", visible: true },
        { key: 7, label: "企业（商户）统信码", visible: true },
        { key: 8, label: "客户类型", visible: true },
        { key: 9, label: "签到时间", visible: true },
        { key: 10, label: "签退时间", visible: true },
        { key: 11, label: "签到地址", visible: true },
        { key: 12, label: "签退地址", visible: true },
        { key: 13, label: "签到坐标", visible: true },
        { key: 14, label: "签退坐标", visible: true },
        { key: 15, label: "是否为有效客户", visible: true },
        { key: 16, label: "走访备注", visible: true }
      ],
      columns875: [
        { key: 17, label: "异常走访标签", visible: true },
        { key: 18, label: "异常走访信息", visible: true },
      ]
    };
  },
  computed: {
    ...mapGetters(["roles", "userName"]),
    //总行
    isHeadAdmin() {
      return this.roles.includes("headAdmin");
    },
    //公司部
    isPublic() {
      return this.roles.includes("headPublic");
    },
    //零售部
    isPrivate() {
      return this.roles.includes("headPrivate");
    },
    //运管部
    isHeadOps() {
      return this.roles.includes("headOps");
    },
    //支行
    isBranchAdmin() {
      return this.roles.includes("branchAdmin");
    },
    // 网点主任
    isOutletAdmin() {
      return this.roles.includes("outletAdmin");
    },
    // 客户经理
    isCommonManager() {
      return this.roles.includes("commonManager");
    },
    // 海宁
    is875() {
      return this.userName.slice(0, 3) === '875'
    }
  },
  created() {
        const {selectedTab} = this.$route.query;
        if (selectedTab) {
            this.selectedTab = selectedTab;
        } else {
            if (this.isPublic) {
                this.selectedTab = '2'
            } else if (this.isPrivate) {
                this.selectedTab = '0'
            } else {
                this.selectedTab = '2'
            }
        }
    this.initVisitingTaskList();
  },
  methods: {
    handleChange(val) {
      this.pageSize = 10;
      this.pageNum = 1;
      this.initVisitingTaskList();
    },
    initVisitingTaskList() {
      const query = {
        custType: this.selectedTab,
        visTime: this.searchForm.visTime,
        visName: this.searchForm.visName,
        custIdc: this.searchForm.custIdc,
        socialCreditCode: this.searchForm.socialCreditCode,
        abnormalVisitTag: this.searchForm.abnormalVisitTag,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      getPADVisitRecord(query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    handleRefersh() {
      this.searchForm = {};
      this.initVisitingTaskList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.initVisitingTaskList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initVisitingTaskList();
    },
    handleSearch() {
      this.initVisitingTaskList();
    },
    resetFilters() {
      this.searchForm = {};
      this.initVisitingTaskList();
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background-color: #ffffff;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  padding: 0 30px 30px 30px;
}

.box-card {
  height: 181px;
  background: #eaf5ff;
  border-radius: 8px;
  margin-top: 25px;
}

.box-card1 {
  height: 181px;
  background: #eaf5ff;
  border-radius: 8px;
  margin-top: 25px;
}

.my-span-checklist-title {
  height: 25px;
  font-weight: 600;
  font-size: 18px;
  color: #222222;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.my-span-checklist-main {
  line-height: 30px;
}

.header-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;

  .btn-disabled {
    ::v-deep .el-radio-button__inner {
      background-color: #e7e7e7;
    }
  }

  .el-radio-button {
    flex: 1;

    ::v-deep .el-radio-button__inner {
      width: 100%;
      border: none;
      font-weight: 400;
      letter-spacing: 0.44px;
      line-height: 25px;
      font-size: 16px;
      color: #666666;
      padding: 11px 0 12px 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #4886f8;
      font-weight: 400;
      color: #ffffff;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:nth-child(2) {
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 21px;
        width: 1px;
        background: #ebebeb;
        z-index: 1;
      }

      &::after {
        right: 1px;
      }
    }

    &.is-active {
      &::before,
      &::after {
        content: none;
      }
    }
  }
}

.btn-disabled {
  ::v-deep .el-radio-button__inner {
    background-color: #e7e7e7;
  }
}

.header-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;
  margin-top: 25px;

  .btn-disabled {
    ::v-deep .el-radio-button__inner {
      background-color: #e7e7e7;
    }
  }

  .el-radio-button {
    flex: 1;
    border: 1px solid #ccc;

    ::v-deep .el-radio-button__inner {
      width: 100%;
      border: none;
      font-weight: 400;
      letter-spacing: 0.44px;
      line-height: 25px;
      font-size: 16px;
      color: #666666;
      padding: 11px 0 12px 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #4886f8;
      font-weight: 400;
      color: #ffffff;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:nth-child(2) {
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 21px;
        width: 1px;
        background: #ebebeb;
        z-index: 1;
      }

      &::after {
        right: 1px;
      }
    }

    &.is-active {
      &::before,
      &::after {
        content: none;
      }
    }
  }
}

.tableData {
  margin-top: 20px;
}

.taskTop {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.taskTop_left {
  display: flex;
}

.taskTop_left_item {
  width: 150px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}

.el-icon-arrow-down {
  margin-left: 15px;
  font-size: 16px;
  color: rgb(64, 149, 229);
}

.searchForm {
  margin-top: 20px;
}

.operate-cnt {
  margin: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .top-right-btn {
    margin-right: 24px;
    padding-bottom: 6px;
  }

  .plain-raido-btn {
    ::v-deep .el-radio-button__inner {
      color: #666666;
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #ebebeb;
      border-radius: 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      border: 1px solid #4886f8;
      color: #4886f8;
      background-color: #ffffff;
      box-shadow: none;
    }
  }
}

.quesiton {
  color: #b9b9b9;
}
</style>
