<template>
  <div class="main">
    <div class="content">
      <el-radio-group
        class="header-radio"
        v-model="selectedTab"
        @input="handleChange"
      >
        <template v-if="String(deptId).substring(0, 3) === '875'">
          <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-button
            label="2"
            :disabled="isPrivate"
            :class="{ 'btn-disabled': isPrivate }"
            >企业</el-radio-button
          >
        </template>
        <template v-else>
          <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
          >
        </template>
      </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="柜员号" class="staff-id-filter">
            <el-input
              v-model="searchForm.visId"
              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 label="营销方式">
            <el-select
              v-model="searchForm.marketingWay"
              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-option label="其他" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="走访结果">
            <el-select
              v-model="searchForm.interRes"
              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"
        >
          <template slot-scope="scope">
            <el-button
              v-if="isPersonalFeedbackTab && getPersonalViewCustId(scope.row)"
              type="text"
              @click="openPersonalView(scope.row)"
            >{{ scope.row.custName }}</el-button>
            <span v-else>{{ scope.row.custName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          prop="custIdc"
          label="客户证件号"
          show-overflow-tooltip
          width="200px"
          v-if="columns[6].visible && selectedTab === '0'"
        >
          <template slot-scope="scope">
            <el-button
              v-if="isPersonalFeedbackTab && getPersonalViewCustId(scope.row)"
              type="text"
              @click="openPersonalView(scope.row)"
            >{{ scope.row.custIdc }}</el-button>
            <span v-else>{{ scope.row.custIdc || "-" }}</span>
          </template>
        </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="marketingWay"
          label="营销方式"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.marketingWay == '0'">实地</span>
            <span v-else-if="scope.row.marketingWay == '1'">电话</span>
            <span v-else-if="scope.row.marketingWay == '2'">短信</span>
            <span v-else-if="scope.row.marketingWay == '3'">拜访未触达</span>
            <span v-else-if="scope.row.marketingWay == '4'">其他</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          prop="interRes"
          label="走访结果"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.interRes == '0'">已走访</span>
            <span v-else-if="scope.row.interRes == '1'">过期未走访</span>
            <span v-else-if="scope.row.interRes == '2'">走访未触达</span>
            <span v-else-if="scope.row.interRes == '3'">待走访</span>
          </template>
        </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-column align="left" prop="interAddr" label="实地拜访地址" show-overflow-tooltip width="180px" v-if="isPersonalFeedbackTab && columns[17].visible"></el-table-column>
        <el-table-column align="left" prop="colStafName" label="协同走访客户经理" show-overflow-tooltip width="160px" v-if="isPersonalFeedbackTab && columns[18].visible"></el-table-column>
        <el-table-column align="left" prop="laterNote" label="事后备注" show-overflow-tooltip width="180px" v-if="isPersonalFeedbackTab && columns[19].visible"></el-table-column>
        <el-table-column align="left" prop="intentionProductValue" label="走访反馈" show-overflow-tooltip width="160px" v-if="isPersonalFeedbackTab && columns[20].visible"></el-table-column>
        <el-table-column align="left" prop="feedbackStatus" label="反馈状态" show-overflow-tooltip width="120px" v-if="isPersonalFeedbackTab && columns[21].visible"></el-table-column>
        <el-table-column align="left" prop="sourceOfInterview" label="走访来源" show-overflow-tooltip width="140px" v-if="isPersonalFeedbackTab && columns[22].visible"></el-table-column>
        <el-table-column align="left" prop="filename" label="批量导入文件名" show-overflow-tooltip width="180px" v-if="isPersonalFeedbackTab && columns[23].visible"></el-table-column>
        <el-table-column align="left" prop="outCallStatus" label="外呼状态" show-overflow-tooltip width="120px" v-if="isPersonalFeedbackTab && columns[24].visible"></el-table-column>
        <el-table-column align="left" prop="outCallIntention" label="客户意愿" show-overflow-tooltip width="140px" v-if="isPersonalFeedbackTab && columns[25].visible"></el-table-column>
        <el-table-column align="left" prop="source" label="走访渠道" show-overflow-tooltip width="120px" v-if="isPersonalFeedbackTab && columns[26].visible">
          <template slot-scope="scope">
            <span>{{ formatSourceLabel(scope.row.source) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="analysisValue" label="nlp模型提取" show-overflow-tooltip width="140px" v-if="isPersonalFeedbackTab && columns[27].visible"></el-table-column>
        <el-table-column align="left" prop="facility" label="预授信额度" show-overflow-tooltip width="140px" v-if="isPersonalFeedbackTab && columns[28].visible"></el-table-column>
        <el-table-column v-if="isPersonalFeedbackTab" align="center" label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              :disabled="isFeedbackCompleted(scope.row)"
              @click="handleEditFeedback(scope.row)"
            >反馈</el-button>
          </template>
        </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>

      <el-dialog
        title="编辑走访反馈"
        :visible.sync="feedbackDialogVisible"
        width="960px"
        custom-class="feedback-dialog"
        append-to-body
        @close="resetFeedbackForm"
      >
        <el-form ref="feedbackFormRef" :model="feedbackForm" label-width="100px" class="feedback-form">
          <el-form-item label="走访渠道" required>
            <el-radio-group v-model="feedbackForm.source">
              <el-radio v-for="item in sourceOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="走访备注">
            <el-input
              v-model="feedbackForm.remark"
              type="textarea"
              :rows="3"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="客户意愿" required>
            <div class="feedback-groups">
              <section v-for="type in feedbackTypeOptions" :key="type" class="feedback-group">
                <div class="feedback-group__title">{{ type }}</div>
                <el-checkbox-group v-model="feedbackForm.feedbackSelections[type]">
                  <el-checkbox
                    v-for="product in feedbackProductOptions"
                    :key="`${type}-${product}`"
                    :label="product"
                  >
                    {{ product }}
                  </el-checkbox>
                </el-checkbox-group>
              </section>
            </div>
          </el-form-item>
          <el-form-item label="走访反馈">
            <div class="feedback-preview">{{ feedbackPreview || "-" }}</div>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="feedbackDialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="feedbackSubmitting" @click="handleSubmitFeedback">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getPADVisitRecord, updatePADVisitFeedback } from "@/api/task/PADvisitRecord.js";

const SOURCE_OPTIONS = [
  { label: "PAD", value: "1" },
  { label: "企业微信", value: "2" },
  { label: "电话", value: "4" }
];
const FEEDBACK_TYPE_OPTIONS = ["拒绝", "考虑", "意愿", "其他", "愿意", "现场办理"];
const FEEDBACK_PRODUCT_OPTIONS = [
  "丰收互联",
  "贷款",
  "电子社保卡签约",
  "基金",
  "贵金属",
  "信用卡",
  "医保电子凭证",
  "社保卡",
  "理财签约"
];

function createEmptyFeedbackSelections() {
  return FEEDBACK_TYPE_OPTIONS.reduce((result, item) => {
    result[item] = [];
    return result;
  }, {});
}
export default {
  data() {
    return {
      selectedTab: "0",
      tableData: [],
      Loading: false,
      feedbackDialogVisible: false,
      feedbackSubmitting: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      sourceOptions: SOURCE_OPTIONS,
      feedbackTypeOptions: FEEDBACK_TYPE_OPTIONS,
      feedbackProductOptions: FEEDBACK_PRODUCT_OPTIONS,
      searchForm: {
        visName: "",
        visId: "",
        visTime: "",
        custIdc: "",
        socialCreditCode: '',
        abnormalVisitTag: '',
        marketingWay: '',
        interRes: ''
      },
      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 },
        { key: 17, label: "实地拜访地址", visible: true },
        { key: 18, label: "协同走访客户经理", visible: true },
        { key: 19, label: "事后备注", visible: true },
        { key: 20, label: "走访反馈", visible: true },
        { key: 21, label: "反馈状态", visible: true },
        { key: 22, label: "走访来源", visible: true },
        { key: 23, label: "批量导入文件名", visible: true },
        { key: 24, label: "外呼状态", visible: true },
        { key: 25, label: "客户意愿", visible: true },
        { key: 26, label: "走访渠道", visible: true },
        { key: 27, label: "nlp模型提取", visible: true },
        { key: 28, label: "预授信额度", visible: true }
      ],
      columns875: [
        { key: 29, label: "异常走访标签", visible: true },
        { key: 30, label: "异常走访信息", visible: true },
      ],
      feedbackForm: {
        id: null,
        source: "",
        remark: "",
        feedbackSelections: createEmptyFeedbackSelections()
      }
    };
  },
  computed: {
    ...mapGetters(["roles", "userName"]),
    deptId() {
      return this.$store.state.user.deptId
    },
    //总行
    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() {
      const deptId = this.deptId === null || this.deptId === undefined ? '' : String(this.deptId)
      return deptId.slice(0, 3) === '875'
    },
    isPersonalFeedbackTab() {
      return this.is875 && this.selectedTab === '0'
    },
    feedbackPreview() {
      return this.buildFeedbackValue(this.feedbackForm.feedbackSelections)
    }
  },
  created() {
        const {selectedTab} = this.$route.query;
        if (selectedTab) {
            this.selectedTab = selectedTab;
        } else {
            // 默认选中第一个tab
            const deptId = this.$store.state.user.deptId
            const deptIdStr = deptId ? String(deptId) : ''
            const defaultTab = deptIdStr.startsWith('875') ? '0' : '2'

            if (this.isPublic) {
                this.selectedTab = '2'
            } else if (this.isPrivate) {
                this.selectedTab = defaultTab
            } else {
                this.selectedTab = defaultTab
            }
        }
    this.initVisitingTaskList();
  },
  methods: {
    resetFeedbackForm() {
      this.feedbackSubmitting = false;
      this.feedbackForm = {
        id: null,
        source: "",
        remark: "",
        feedbackSelections: createEmptyFeedbackSelections()
      };
    },
    parseFeedbackValue(value) {
      const feedbackSelections = createEmptyFeedbackSelections();
      if (!value) {
        return feedbackSelections;
      }
      value.split(";").forEach((segment) => {
        const [type, products] = segment.split(":");
        if (!type || !feedbackSelections[type]) {
          return;
        }
        feedbackSelections[type] = (products || "")
          .split(",")
          .map(item => item && item.trim())
          .filter(Boolean);
      });
      return feedbackSelections;
    },
    buildFeedbackItems(feedbackSelections) {
      return this.feedbackTypeOptions
        .map((type) => ({
          feedbackType: type,
          products: (feedbackSelections[type] || []).filter(Boolean)
        }))
        .filter(item => item.products.length > 0);
    },
    buildFeedbackValue(feedbackSelections) {
      return this.buildFeedbackItems(feedbackSelections)
        .map(item => `${item.feedbackType}:${item.products.join(",")}`)
        .join(";");
    },
    isFeedbackCompleted(row) {
      const interRes = row && row.interRes !== null && row.interRes !== undefined ? String(row.interRes).trim() : "";
      return interRes === "0";
    },
    formatSourceLabel(source) {
      const sourceValue = source === null || source === undefined ? "" : String(source);
      const matched = this.sourceOptions.find(item => item.value === sourceValue);
      return matched ? matched.label : (sourceValue || "-");
    },
    getPersonalViewCustId(row) {
      const custId = row && row.custId ? String(row.custId).trim() : "";
      if (custId) {
        return custId;
      }
      const custIdc = row && row.custIdc ? String(row.custIdc).trim() : "";
      return custIdc ? `101${custIdc}` : "";
    },
    openPersonalView(row) {
      if (!this.isPersonalFeedbackTab) {
        this.$message.warning("当前机构暂无个人客户视图跳转权限");
        return;
      }
      const custId = this.getPersonalViewCustId(row);
      if (!custId) {
        this.$message.warning("未获取到客户标识，暂时无法跳转个人视图");
        return;
      }
      this.$router.push({
        path: "/360charts/indexcharts",
        query: {
          custId,
          selectedTab: this.selectedTab,
          backUrl: this.$route.path
        }
      });
    },
    handleEditFeedback(row) {
      if (this.isFeedbackCompleted(row)) {
        return;
      }
      this.feedbackForm = {
        id: row.id,
        source: row.source === null || row.source === undefined ? "" : String(row.source),
        remark: row.remark || "",
        feedbackSelections: this.parseFeedbackValue(row.intentionProductValue)
      };
      this.feedbackDialogVisible = true;
    },
    handleSubmitFeedback() {
      const feedbackItems = this.buildFeedbackItems(this.feedbackForm.feedbackSelections);
      if (!this.feedbackForm.source) {
        this.$message.warning("请选择走访渠道");
        return;
      }
      if (!feedbackItems.length) {
        this.$message.warning("请至少选择一组客户意愿和营销产品");
        return;
      }
      const payload = {
        id: this.feedbackForm.id,
        source: this.feedbackForm.source || null,
        remark: this.feedbackForm.remark || null,
        feedbackItems
      };
      this.feedbackSubmitting = true;
      updatePADVisitFeedback(payload).then(() => {
        this.$message.success("保存成功");
        this.feedbackDialogVisible = false;
        this.resetFeedbackForm();
        this.initVisitingTaskList();
      }).finally(() => {
        this.feedbackSubmitting = false;
      });
    },
    handleChange(val) {
      this.pageSize = 10;
      this.pageNum = 1;
      this.initVisitingTaskList();
    },
    initVisitingTaskList() {
      const query = {
        custType: this.selectedTab,
        visTime: this.searchForm.visTime,
        visName: this.searchForm.visName,
        visId: this.searchForm.visId,
        custIdc: this.searchForm.custIdc,
        socialCreditCode: this.searchForm.socialCreditCode,
        abnormalVisitTag: this.searchForm.abnormalVisitTag,
        marketingWay: this.searchForm.marketingWay,
        interRes: this.searchForm.interRes,
        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 = {
        visName: "",
        visId: "",
        visTime: "",
        custIdc: "",
        socialCreditCode: '',
        abnormalVisitTag: '',
        marketingWay: '',
        interRes: ''
      };
      this.initVisitingTaskList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.initVisitingTaskList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initVisitingTaskList();
    },
    handleSearch() {
      this.initVisitingTaskList();
    },
    resetFilters() {
      this.searchForm = {
        visName: "",
        visId: "",
        visTime: "",
        custIdc: "",
        socialCreditCode: '',
        abnormalVisitTag: '',
        marketingWay: '',
        interRes: ''
      };
      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;
}

.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;

    ::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;

  .staff-id-filter {
    clear: left;
    margin-left: 0 !important;
  }
}

.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;
    }
  }
}

.feedback-form {
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
    color: #f56c6c;
    margin-right: 4px;
  }

  .feedback-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .feedback-group {
    padding: 10px 12px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    background: #fafbfc;
  }

  .feedback-group__title {
    margin-bottom: 10px;
    color: #303133;
    font-weight: 600;
  }

  ::v-deep .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
  }

  ::v-deep .el-checkbox {
    margin-right: 0;
    min-width: auto;
    white-space: nowrap;
  }

  .feedback-preview {
    min-height: 20px;
    color: #606266;
    word-break: break-all;
  }
}

::v-deep .feedback-dialog {
  border-radius: 18px;
  overflow: hidden;

  .el-dialog__header {
    padding: 20px 24px 16px;
  }

  .el-dialog__body {
    padding: 12px 24px 20px;
  }

  .el-dialog__footer {
    padding: 10px 24px 20px;
  }
}

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