<template>
  <div class="main_box">
    <navbar title="走访任务" special @handleClickLeft="handleGoBefore"></navbar>
    <div class="wrapper">
      <div class="wrapper_main">
        <!-- <van-tabs
          @change="tabChange()"
          v-model="activeTab"
          class="content"
          type="line"
          color="#4682ff"
          title-active-color="#4682ff"
          line-width="80"
        >
          <van-tab title="个人" :disabled="isPrivate"></van-tab>
          <van-tab title="商户" :disabled="isPublic"></van-tab>
          <van-tab title="企业" :disabled="isPublic"></van-tab>
        </van-tabs> -->
        <van-sticky :offset-top="46">
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="search.visitType"
              :options="visitTypeList"
              @change="initList"
            />
            <van-dropdown-item title="更多筛选" ref="item">
              <div class="search-input">
                <van-row>
                  <van-col span="8">
                    <van-search
                      type="text"
                      placeholder="请选择日期"
                      v-model="search.startTimeMonth"
                      left-icon=""
                      readonly
                      @click="showDatePicker = true"
                      right-icon=""
                    >
                      <template #right-icon>
                        <van-icon
                          name="arrow-down"
                          size="16"
                          v-if="!search.startTimeMonth"
                        />
                        <van-icon
                          name="clear"
                          size="16"
                          v-else
                          @click.stop="clearOption('startTimeMonth')"
                        />
                      </template>
                    </van-search>
                  </van-col>
                  <van-col span="8">
                    <van-search
                      type="text"
                      :left-icon="null"
                      v-model="search.campaignName"
                      placeholder="请输入"
                    />
                  </van-col>
                  <van-col span="8">
                    <van-search
                      type="text"
                      placeholder="请选择客户类型"
                      v-model="custTypeText"
                      left-icon=""
                      readonly
                      @click="showCustPicker = true"
                      right-icon=""
                    >
                      <template #right-icon>
                        <van-icon
                          name="arrow-down"
                          size="16"
                          v-if="!custTypeText"
                        />
                        <van-icon
                          name="clear"
                          size="16"
                          v-else
                          @click.stop="clearCustType"
                        />
                      </template>
                    </van-search>
                  </van-col>
                  <van-col span="8" :offset="16">
                    <div class="button-box">
                      <div class="search_btn" @click="handleSearch">
                        <van-icon name="search" class="icon"></van-icon>
                      </div>
                      <div class="search_btn reset" @click="resetForm">
                        <van-icon name="cross" class="icon"></van-icon>
                      </div>
                    </div>
                  </van-col>
                </van-row>

                <van-popup v-model:show="showDatePicker" position="bottom">
                  <van-datetime-picker
                    v-model="currentDate"
                    :min-date="minDate"
                    :max-date="maxDate"
                    type="year-month"
                    title="选择日期"
                    @confirm="onConfirmDate"
                    @cancel="showDatePicker = false"
                  ></van-datetime-picker>
                </van-popup>

                <!-- <div class="search_input_item">
            <van-search
              type="text"
              placeholder="请选择走访类型"
              v-model="search.visitType"
              left-icon=""
              class="special-search"
              readonly
              @click="showVisitTypePicker = true"
              right-icon=""
            >
              <template #right-icon>
                <van-icon
                  name="arrow-down"
                  size="16"
                  v-if="!search.visitType"
                />
                <van-icon
                  name="clear"
                  size="16"
                  v-else
                  @click.stop="clearOption('visitType')"
                />
              </template>
            </van-search>
            <van-popup v-model:show="showVisitTypePicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="visitTypeList"
                @cancle="showVisitTypePicker = false"
                :value-key="'label'"
                @confirm="onVisitTypeUser"
                @cancel="cancelVisitType"
              ></van-picker>
            </van-popup>
          </div> -->

                <van-popup v-model:show="showCustPicker" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="custTypeList"
                    :value-key="'text'"
                    @cancle="showCustPicker = false"
                    @confirm="onChooseCustTypeConfirm"
                  ></van-picker>
                </van-popup>
              </div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </van-sticky>

        <div class="title">
          <span>共有</span>
          <span class="num">{{ list.length }}</span>
          <span>条走访任务</span>
        </div>
        <div :class="!item.hideList?'item':''" v-for="(item, index) in list" :key="index">
          <div class="item_top" v-if="!item.hideList" @click="handleViewDetail(item)">
            <div class="item_top_left">
              <div class="item_name">{{ item.campaignName }}</div>
            </div>
            <div v-if="item.visitType" class="item_viewDetail_one">{{ item.visitType }}</div>
            <div class="item_viewDetail">查看客户</div>
          </div>
          <div class="item_main" v-if="!item.hideList">
            <div class="main_item">
              <span class="mian_title">开始时间：</span>{{ item.startTime }}
            </div>
            <div class="main_item">
              <span class="mian_title">结束时间：</span>{{ item.endTime }}
            </div>
            <div class="main_item">
              <span class="mian_title">紧急程度：</span
              >{{ item.campaignDegree }}
            </div>
            <div class="main_item">
              <span class="mian_title">考核目标：</span>{{ item.checkTarget }}
            </div>
            <div class="main_item">
              <span class="mian_title">任务模式：</span
              >{{ item.isCooperate === true ? "协作任务" : "普通任务" }}
            </div>
            <div class="main_item">
              <span class="mian_title">任务描述：</span>{{ item.remark }}
            </div>
            <div class="main_item">
              <span class="mian_title">需走访客户数：</span
              >{{ item.totalCount }}
            </div>
            <div class="main_item">
              <span class="mian_title">已走访客户数：</span
              >{{ item.completeCount }}
            </div>
            <div class="main_item">
              <span class="mian_title">未走访客户数：</span
              >{{ item.unCompleteCount }}
            </div>
            <div class="main_item">
              <span class="mian_title">任务进度：</span
              >{{ getRate(item.completeCount, item.totalCount) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import { getVisitList } from "@/service/api/visiting";
import {
  Tab,
  Tabs,
  Icon,
  Button,
  Search,
  List,
  PullRefresh,
  Field,
  Popup,
  DatetimePicker,
  Picker,
  DropdownMenu,
  DropdownItem,
  Row,
  Col,
  Sticky,
} from "vant";
export default {
  data() {
    return {
      activeTab: 0,
      search: {
        startTimeMonth: "",
        visitType: "",
        campaignName: "",
        taskType: "0",
        custType: "",
      },
      showDatePicker: false,
      showCustPicker: false,
      currentDate: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      showVisitTypePicker: false,
      custTypeList: [
        { text: "个人", value: "0" },
        { text: "商户", value: "1" },
        { text: "企业", value: "2" },
      ],
      visitTypeList: [
        { text: "我的走访", value: "" },
        { text: "商户走访", value: "商户走访" },
        { text: "催收走访", value: "催收走访" },
        { text: "竞争性走访", value: "竞争性走访" },
        { text: "企业走访", value: "企业走访" },
        { text: "个人走访", value: "个人走访" },
        { text: "收单商户走访", value: "收单商户走访" },
        { text: "域外商会走访", value: "域外商会走访" },
        { text: "其他走访", value: "其他走访" },
      ],
      list: [],

      custPattern: "2",
      isHeadAdmin: false,
      isPublic: false,
      isPrivate: false,
      isHeadOps: false,
      isBranchAdmin: false,
      isOutletAdmin: false,
      isCommonManager: false,
      custTypeText: "",
    };
  },
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanTabs: Tabs,
    VanIcon: Icon,
    VanButton: Button,
    VanSearch: Search,
    VanList: List,
    VanPullRefresh: PullRefresh,
    VanField: Field,
    VanPopup: Popup,
    VanDatetimePicker: DatetimePicker,
    VanPicker: Picker,
    VanDropdownMenu: DropdownMenu,
    VanDropdownItem: DropdownItem,
    VanRow: Row,
    VanCol: Col,
    VanSticky: Sticky,
  },
  created() {
    let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (userInfo.roles.includes("headAdmin")) {
      this.isHeadAdmin = true;
    } else if (userInfo.roles.includes("headPublic")) {
      this.isPublic = true;
    } else if (userInfo.roles.includes("headPrivate")) {
      this.isPrivate = true;
      this.custPattern = "0";
    } else if (userInfo.roles.includes("headOps")) {
      this.isHeadOps = true;
    } else if (userInfo.roles.includes("branchAdmin")) {
      this.isBranchAdmin = true;
    } else if (userInfo.roles.includes("outletAdmin")) {
      this.isOutletAdmin = true;
    } else if (userInfo.roles.includes("commonManager")) {
      this.isCommonManager = true;
    }
    let activeTab = sessionStorage.getItem("activeTab");
    if (activeTab) {
      this.activeTab = Number(activeTab);
    }

    if (activeTab == 0) {
      this.custPattern = "0";
    } else if (activeTab == 1) {
      this.custPattern = "1";
    } else if (activeTab == 2) {
      this.custPattern = "2";
    }
    this.initList();
  },
  methods: {
    async initList() {
      if (this.currentPage === 1) {
        this.list = [];
      }
      const params = {
        campaignName: this.search.campaignName,
        startTimeMonth: this.search.startTimeMonth,
        visitType: this.search.visitType,
        custType: this.search.custType,
      };
      const res = await getVisitList(params);
      if (res.code == 200) {
        sessionStorage.removeItem("activeTab");
        if (res.data) {
          this.list = res.data;
        }
      }
    },
    getRate(visited, total) {
      if(total == 0){
        return "0.00%"
      }
      const rate = visited / total;
      return `${(rate * 100).toFixed(2)}%`;
    },
    handleGoBefore() {
      this.$router.push("/dashboard/home");
    },
    clearCustType() {
      this.search.custType = "";
      this.custTypeText = "";
    },
    tabChange() {
      if (this.activeTab == 0) {
        this.custPattern = "0";
      } else if (this.activeTab == 1) {
        this.custPattern = "1";
      } else if (this.activeTab == 2) {
        this.custPattern = "2";
      }
      this.search = {
        startTimeMonth: "",
        visitType: "",
        campaignName: "",
      };

      this.initList();
    },

    onChooseCustTypeConfirm(val) {
      this.search.custType = val.value;
      this.custTypeText = val.text;
      this.showCustPicker = false;
    },

    handleSearch() {
      this.$refs.item.toggle(false);
      this.initList();
    },
    resetForm() {
      this.search.campaignName = "";
      this.search.startTimeMonth = "";
      this.search.visitType = "";
      this.search.custType = "";
      this.initList();
      this.$refs.item.toggle(false);
    },
    clearOption(key) {
      this.search[key] = "";
      this[key] = undefined;
      this.initList();
    },
    handleViewDetail(item) {
      sessionStorage.setItem("campaignId", item.campaignId);
      sessionStorage.setItem("activeTab", this.activeTab);
      sessionStorage.setItem("custType", item.custType);
      sessionStorage.setItem("visitType", item.visitType);
      this.$router.push("/visitingTaskDetails");
    },
    formatDate(date) {
      if (date.getMonth() + 1 < 10) {
        return `${date.getYear() + 1900}-0${date.getMonth() + 1}`;
      } else {
        return `${date.getYear() + 1900}-${date.getMonth() + 1}`;
      }
    },
    onConfirmDate(value) {
      this.search.startTimeMonth = this.formatDate(value);
      // this.initList();
      this.showDatePicker = false;
    },
    onVisitTypeUser(value) {
      this.search.visitType = value.value;
      this.initList();
      this.showVisitTypePicker = false;
    },
    cancelVisitType() {
      this.showVisitTypePicker = false;
    },
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  font-size: 16px;
  padding-bottom: 60px;
}

.search-input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3px;
  background: #fff;
  flex-wrap: wrap;
  padding-bottom: 4px;

  .button-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
  }
  ::v-deep .van-field__control::-webkit-input-placeholder {
    font-size: 12px;
  }
  .special-search {
    padding-right: 0 !important;
    ::v-deep .van-search__content {
      padding-left: 4px !important;
    }
    ::v-deep .van-cell {
      padding-right: 0 !important;
    }
    // ::v-deep .van-field__control::-webkit-input-placeholder{
    //   font-size: 12px;
    // }
  }
}

.item {
  margin: 10px 0;
  background-color: #fff;
  padding: 15px 20px;
}

.item_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item_top_left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 70%;
}

.item_name {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
}

.item_viewDetail_one {
  background-color: rgba(255, 248, 240);
  color: rgb(233, 157, 66);
  padding: 10px 0;
  border-radius: 5px;
  width: 40%;
  text-align: center;
}

.item_viewDetail {
  background-color: rgba(233, 241, 253);
  color: rgb(35, 114, 235);
  padding: 10px 0;
  border-radius: 5px;
  width: 30%;
  margin-left: 5px;
  text-align: center;
}

.icon_box {
  background-color: rgb(35, 114, 235);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
}

.item_main {
  margin-top: 10px;
}

.main_item {
  font-size: 16px;
  line-height: 25px;
  word-break: break-all;
}

.mian_title {
  color: rgb(140, 140, 140);
}

.item_user {
  font-size: 25px;
  color: #fff;
}

.userMan_box {
  background-color: rgb(35, 114, 235);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
}

.userWoMan_box {
  background-color: rgb(252, 123, 80);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
}

.main_box {
  position: relative;
}

.footer {
  position: fixed;
  top: 600px;
  left: 80%;
}

.fotter_btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(70, 130, 255);
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.search_btn {
  background-color: rgb(24, 144, 255);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 20px;

  .icon {
    display: inline-block;
    width: 40px;
    text-align: center;
  }
}

.title {
  font-size: 12px;
  color: rgb(140, 140, 140);
  padding: 10px 10px 5px 15px;
}

.num {
  color: red;
}
.reset {
  background: #f7f8fa;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 3px;
  margin-right: 8px;
}
</style>
