<template>
  <div>
    <van-tabs v-model="tabActive">
      <van-tab title="客户列表" name="customerList"></van-tab>
      <van-tab title="数据看板" name="dataBoard"></van-tab>
      <van-tab title="产品列表" name="productList"></van-tab>
    </van-tabs>
    <div v-if="tabActive == 'customerList'">
      <div style="display: flex;align-items: center;padding-left: 10px;background: #fff;">
        <div style="width: 30%;">
          <van-dropdown-menu :overlay="dropdownmenuoverlay">
            <van-dropdown-item v-model="filterType" :options="filterTypeOption" @change="dropdownMenuChange"/>
          </van-dropdown-menu>
        </div>
        <van-search v-if="filterType == 1 || filterType == 2 || filterType == 3" v-model="searchvalue" shape="round" @search="getGBCappntlist" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
        <div v-if="filterType == 4" style="display: flex;align-items: center;height: 54px;">
          <div @click="toChooseDate('startDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding:0px 10px;">
            <van-icon name="notes-o" />
            <span v-if="!startDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
            <span v-if="startDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{startDate}}</span>
          </div>
          <span style="margin: 0px 5px;font-size: 14px;">至</span>
          <div @click="toChooseDate('endDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding: 0px 10px;">
            <van-icon name="notes-o" />
            <span v-if="!endDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
            <span v-if="endDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{endDate}}</span>
          </div>
        </div>
      </div>
      <div style="padding: 0px 10px 10px;">
        <div v-for="(item,index) in customerList" :key="index">
          <div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
            <div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
              <div style="width: 55%;overflow: hidden;white-space: nowrap;">
                <p>客户姓名：{{item.appntName}}</p>
                <p>手机号码：{{item.mobile}}</p>
                <p>服务组长：{{item.teamLeader}}</p>
              </div>
              <div style="width: 45%;overflow: hidden;white-space: nowrap;">
                <p>部门/科室：{{item.departmentName}}</p>
                <p>承保保单：{{item.contSize}}份</p>
                <p>服务组员：{{item.teamMember}}</p>
              </div>
            </div>
            <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
              <van-button @click="goCustomerDetail(item)" type="danger" size="small" style="border-radius:5px;">查看编辑</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="tabActive == 'dataBoard'">
      <div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
        <p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目名称：国富人寿北京协和医院AA项目</p>
        <p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
        <div style="display: flex;justify-content: center;margin-top: 20px;">
          <van-circle v-model="currentRate" color="#E9332E" :stroke-width="60" size="80px" :rate="85" :speed="100" :text="text" />
        </div>
        <p style="display: flex;justify-content: center;font-weight: bold;font-size: 14px;margin: 10px;">面谈转化率</p>
        <div style="padding: 10px;background: rgba(251, 235, 230, 0.5);border-radius: 5px;display: flex;justify-content: flex-start;flex-wrap:wrap;">
          <div v-for="(item,index) in dataList1" style="width: 33%;display: flex;justify-content: space-around;align-items: center;">
            <div>
              <div style="font-size: 12px;line-height: 22px;margin: 7px 0px;">
                <p style="display: flex;justify-content: center;font-size: 14px;">{{item.value}}</p>
                <p style="display: flex;justify-content: center;align-items: center;">
                  <span class="colorBlock" :style="{background:colorList[index]}"></span>
                  {{item.name}}
                </p>
              </div>
            </div>
<!--            <div v-if="(index + 1) % 3 != 0 || index < 2" style="width: 1px;background: #FFC9AF;height: 60%;"></div>-->
          </div>
        </div>
      </div>
      <div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
        <div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
          <p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目成员分配</p>
          <p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
        </div>
        <div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
          <span style="width: 18%;display: flex;justify-content: center;">成员</span>
          <span style="width: 22%;display: flex;justify-content: center;">角色</span>
          <span style="width: 30%;display: flex;justify-content: center;">累计标保(元)</span>
          <span style="width: 30%;display: flex;justify-content: center;">受理标保(元)</span>
        </div>
        <div>
          <div v-for="item in dataList2" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
            <span style="width: 18%;display: flex;justify-content: center;">{{item.name}}</span>
            <span style="width: 22%;display: flex;justify-content: center;">{{item.role}}</span>
            <span style="width: 30%;display: flex;justify-content: center;">{{item.value1}}</span>
            <span style="width: 30%;display: flex;justify-content: center;">{{item.value2}}</span>
          </div>
        </div>
      </div>

      <div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
        <div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
          <p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目数据统计</p>
          <p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
        </div>
        <div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
          <span style="width: 25%;display: flex;justify-content: center;">小组</span>
          <span style="width: 25%;display: flex;justify-content: center;">组长</span>
          <span style="width: 25%;display: flex;justify-content: center;">获客人数</span>
          <span style="width: 25%;display: flex;justify-content: center;">获客率</span>
        </div>
        <div>
          <div style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
            <span style="width: 50%;display: flex;justify-content: center;">项目合并</span>
            <span style="width: 25%;display: flex;justify-content: center;">890</span>
            <span style="width: 25%;display: flex;justify-content: center;">89%</span>
          </div>
        </div>
        <div>
          <div v-for="(item,index) in dataList3" :key="index" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
            <span style="width: 25%;display: flex;justify-content: center;">{{item.name}}</span>
            <span style="width: 25%;display: flex;justify-content: center;">{{item.role}}</span>
            <span style="width: 25%;display: flex;justify-content: center;">{{item.value1}}</span>
            <span style="width: 25%;display: flex;justify-content: center;">{{item.value2}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="tabActive == 'productList'">
      <div v-for="(item,index) in dataList4" @click="goProductDetail(item.productCode)" :key="index" style="background: #fff;border-radius: 5px;margin: 5px;display: flex;padding: 5px;">
        <img :src="item.productImageUrl"  style="display: inline-block;width: 35%;border-radius: 5px;"/>
        <div style="display: inline-block;width: 65%;padding-left: 10px;">
          <p style="font-size: 16px;">{{item.productName}}</p>
          <p style="font-size: 14px;color: #bdbdbd;margin-top: 20px;">{{item.productDesc}}</p>
        </div>
      </div>
    </div>

    <van-popup v-model="showDataPicker" position="bottom">
      <van-datetime-picker type="date" v-model="currentDate" @confirm="onConfirmDate" @cancel="cancelDate" :max-date="maxDate" :min-date="minDate" />
    </van-popup>
  </div>
</template>

<script>
import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
import { getList } from '@/api/ebiz/product/product.js'
import { getGBCappntlist } from '@/api/GBC/GBC.js'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Circle.name]: Circle,
  },
  data() {
    return {
      tabActive:1,
      searchvalue:'',
      filterType: 1,
      startDate:'',
      endDate:'',
      showDataPicker:false,
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2050, 11, 31),
      currentDate:new Date(),
      datePickerType:'',
      filterTypeOption: [
        { text: '按客户', value: 1 },
        { text: '按科室', value: 2 },
        { text: '按小组', value: 3 },
        { text: '按日期', value: 4 },
      ],
      dropdownmenuoverlay:false,
      customerList:[],
      currentRate: 0,
      colorList:['#E9332E','#CB9BFF','#54C6FA','#FF9B39','#60D64D','#4045F3','#FF59D9','#E8C0A2','#FCD338','#7584A2'],
      dataList1:[
        {name:'累计受理保费(元)',value:'150,000.00'},
        {name:'累计标保(元)',value:'250,000.00'},
        {name:'件均保费(元)',value:'130,000.00'},
        {name:'件均保费(元)',value:'10856'},
        {name:'累计受理件数(件)',value:'356'},
        {name:'累计承保人数(人)',value:'9569'},
        {name:'累计承保件数(件)',value:'262'},
      ],
      dataList2:[
        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
        {name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
      ],
      dataList3:[
        {name:'A组',role:'李艾',value1:'600',value2:'60'},
        {name:'A组',role:'李艾',value1:'600',value2:'60'},
        {name:'A组',role:'李艾',value1:'600',value2:'60'},
        {name:'A组',role:'李艾',value1:'600',value2:'60'},
        {name:'A组',role:'李艾',value1:'600',value2:'60'},
        {name:'A组',role:'李艾',value1:'600',value2:'60'},
        {name:'A组',role:'李艾',value1:'600',value2:'60'},
      ],
      dataList4:[],
    }
  },
  created() {

  },
  mounted(){
    this.getGBCappntlist()
    this.getProductList()
  },
  methods: {
    dropdownMenuChange(value){
      this.filterType = value
      this.searchvalue = ''
      this.startDate = ''
      this.endDate = ''
      if(value == 1 || value == 2 || value == 3) {
        this.getGBCappntlist()
      }
    },
    getGBCappntlist(){
      let params = {
        "projectCode": this.$route.query.projectCode,
        "filterType": this.filterType,
        "appntName": "",
        "departmentName": "",
        "teamMemberName": "",
        "startDate": "",
        "endDate": ""
      }
      if(this.filterType == 1){
        params.appntName = this.searchvalue
      }
      if(this.filterType == 2){
        params.departmentName = this.searchvalue
      }
      if(this.filterType == 3){
        params.teamMemberName = this.searchvalue
      }
      if(this.filterType == 4) {
        params.startDate = this.startDate
        params.endDate = this.endDate
      }
      getGBCappntlist(params).then(res=>{
        if(res.result == '0') {
          this.customerList = []
          if(res.content && res.content.length != 0) {
            this.customerList = res.content
          }
        } else {
          this.$toast(res.resultMessage)
        }
      })
    },
    toChooseDate(type){
      this.datePickerType = type
      if(type == 'startDate') {
        this.showDataPicker = true
      }
      if(type == 'endDate') {
        this.showDataPicker = true
      }
    },
    onConfirmDate(date){
      if(this.datePickerType == 'startDate') {
        let year = date.getFullYear()
        let month = String(date.getMonth() + 1).padStart(2, '0');
        let day = String(date.getDate()).padStart(2, '0');
        this.startDate = year + '-' + month + '-' + day;
        if(this.endDate) {
          this.getGBCappntlist()
        }
      }
      if(this.datePickerType == 'endDate') {
        let year = date.getFullYear()
        let month = String(date.getMonth() + 1).padStart(2, '0');
        let day = String(date.getDate()).padStart(2, '0');
        this.endDate = year + '-' + month + '-' + day;
        if(this.startDate) {
          this.getGBCappntlist()
        }
      }
      this.showDataPicker = false
    },
    cancelDate(){
      this.showDataPicker = false
    },
    goCustomerDetail(data){
      this.$router.push({
        path:'/GBC/customerDetail',
        query:{
          projectCode:this.$route.query.projectCode,
          appntId:data.appntId
        },
      })
    },
    getProductList(){
      let params = {
        type: 'app'
      }
      getList(params).then(res=>{
        if(res.result == '0') {
          this.dataList4 = this.dataList4.concat(res.productList)
        } else {
          this.$toast(res.resultMessage)
        }
      })
    },
    goProductDetail(productCode) {
      localStorage.productDetailCode = productCode
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + `/#/product/ProductDetail/${productCode}`
        },
        routerInfo: {
          path: `/product/ProductDetail/${productCode}`
        }
      })
    },
  },
  // watch: {
  //   isShowOthenSalarySource(nVal) {
  //     if (!nVal) {
  //       this.userInfo.otherSalarySource = ''
  //     }
  //   },
  // },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
  beforeRouteLeave(to, from, next) {
    document.body.style.backgroundColor = ''
    next()
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .van-search__content{
    background: #fff;
  }
  /deep/ .van-dropdown-menu{
    height: 34px;
  }
  /deep/ .van-dropdown-item__content{
    width: 40%;
    left: 10px;
  }
  /deep/ .van-dropdown-menu{
    background: #f5f5f5;
  }
  .colorBlock{
    width: 8px;
    height: 8px;
    display: inline-block;
    /*background: #000;*/
    border-radius: 3px;
    margin-right: 3px;
  }
  /deep/ .van-hairline--top-bottom::after{
    border: none;
  }
  /deep/ .van-dropdown-menu{
    background: #fff;
  }
  /deep/ .van-search__content{
    background: #f5f5f5;
  }
  /deep/ [data-v-3f765cce] .van-dropdown-item__content{
    box-shadow: 0px 0px 5px 5px #f5f5f5;
  }
</style>
