<template>
  <view class="app-container">
    <u-navbar :title="title" safeAreaInsetTop placeholder>
      <view class="flex justify-between" slot="left" @click="loginOut">
        <u-icon size="15" name="/static/images/icon/login-out.png"></u-icon>
        <view class="text-red margin-left-xs">
          退出
        </view>
      </view>
    </u-navbar>
    <view class="flex justify-between align-center padding-sm bg-white">
      <view class="w70">
        <u-search v-model="keyword" bgColor="#fff" borderColor="#EC1E19" :clearabled="true" placeholder="请输入户名"
          :actionStyle="actionStyle" @custom="onSearch" @clear="onClear"></u-search>
      </view>
      <view class="w30 margin-left">
        <u-checkbox-group activeColor="#EC1E19" v-model="approvalValue" placement="column" @change="checkboxChange">
          <u-checkbox v-for="(item, index) in approval" :key="index" :label="item.name" :name="item.name">
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>
    <view class="topSelectCss">
      <view class="flex justify-between">
        <view class="flex align-center" v-for="(item,index) of searchList" @click="openPicker(item)" :key="item.title">
          <view class="text-lg">
            <span v-if="searchForm[item.name]" class="text-red">
              {{searchForm[item.name]}}
              <span v-if="item.name === 'year'" :class="isCN?'text-red':''">
              </span>
            </span>
            <span v-else :class="isCN&&item.name === 'year'?'text-red':''">{{ item.title }}</span>
          </view>
          <view class="margin-left-xs" v-if="item.title == '财年'">
            <u-icon name="calendar-fill" size="25"></u-icon>
          </view>
          <view class="margin-left-xs" v-else>
            <u-icon v-if="currentName == item.key" color="#5875eb" name="arrow-up-fill" size="12"></u-icon>
            <u-icon v-else name="arrow-down-fill" color="#999db0" size="12"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="">
      <!--      <uv-drop-down ref="dropDown" sign="dropDown_1" :extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"-->
      <!--        :extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}">-->
      <!--        <uv-drop-down-item name="order" type="2" label="财年" value="all">-->
      <!--        </uv-drop-down-item>-->
      <!--        <uv-drop-down-item name="type" type="2" label="项目公司" value="0">-->
      <!--        </uv-drop-down-item>-->
      <!--        <uv-drop-down-item name="type" type="2" label="状态" value="0">-->
      <!--        </uv-drop-down-item>-->
      <!--        <uv-drop-down-item name="type" type="2" label="类型" value="0">-->
      <!--        </uv-drop-down-item>-->
      <!--      </uv-drop-down>-->
    </view>

    <view class="usuallyCard margin padding" v-if="list.length" v-for="(item,index) in list" :key="index"
      @click="viewDetail(item)">
      <view class="flex flex-direction">
        <view class="flex justify-between">
          <view class="">
            {{item.fiscalYear || "--"}}财年
          </view>
          <view class="flex">
            <u-tag class="margin-right" :bgColor="bfColorStatus(item.ticketType,'bg')" borderColor="#fff"
              :color="bfColorStatus(item.ticketType,'color')" size="mini"
              :text="getDictDataLabel(DICT_TYPE.SYS_MC_VISIT_TYPE, item.ticketType)"></u-tag>
            <u-tag :bgColor="colorStatus(item.statusCode,'bg')" borderColor="#fff"
              :color="colorStatus(item.statusCode,'color')" size="mini" :text="item.statusName || '--'"></u-tag>
          </view>
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">工单编号:</text>{{item.ticketNumber || "--"}}
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">项目公司:</text>{{item.companyName|| "--"}}
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">收费人员:</text>{{item.billingPersonName}}
          - ({{getDictDataLabel(DICT_TYPE.SYS_MC_JOB_NATURE, item.jobNature) || "--"}})
        </view>
        <view class="margin-top-sm">
          <text class="text-grey margin-right-xs">用户:</text>{{item.userName|| "--"}}
        </view>
      </view>
      <view class="flex justify-end margin-top">
        <view class="w30 margin-right-xs">
          <zb-popover placement="bottom-start" theme="dark" ref="Popover1" class="item-popover">
            <view slot="content" class="popoverCss">
              <view class="" v-if="publishChangePermission(item)">
                <view class="margin-tb-xs" @click="dataChange(item)">数据异动</view>
                <u-line></u-line>
              </view>
              <view class="">
                <view class="margin-tb-xs" @click="processFlow(item)">处理流程</view>
                <u-line></u-line>
              </view>
              <!-- <view class="" v-if="!!item.modificationStatus">
                <view class="margin-tb-xs" @click="changeFlow(item)">异动记录</view>
                <u-line></u-line>
              </view> -->
              <view class="" v-if="cancelPermission(item)">
                <view class="margin-tb-xs text-center" @click="giveUpVoid(item)">作废</view>
                <u-line></u-line>
              </view>
            </view>
            <u-button shape="circle">更多操作</u-button>
          </zb-popover>
        </view>
        <view class="w30 margin-right-xs" @click="handleDetail(item)">
          <u-button shape="circle">查看详情</u-button>
        </view>
        <view class="w25 margin-right-xs" @click="handleEdit(item)" v-if="editPermission(item)">
          <u-button shape="circle" color="#CF000D">修改</u-button>
        </view>
        <view class="w22 margin-right-xs" @click="handleRefuse(item)" v-if="auditPermission(item)">
          <u-button shape="circle">拒绝</u-button>
        </view>
        <view class="w22" @click="handleAgree(item)" v-if="auditPermission(item)">
          <u-button shape="circle" color="#CF000D">同意</u-button>
        </view>
      </view>
      <view class="nodeCss" v-if="item.statusCode === 'APPROVE' || item.statusCode === 'EDITING'">
        {{item.statusNodeName}}
      </view>
    </view>
    <u-loadmore :status="status" v-if="list.length > 0" />
    <u-empty text="暂无拜访/收费数据" icon="/static/images/icon/nodata.png" v-else></u-empty>

    <view v-if="$checkPermi(['schsf:mcVisit:add'])" class="fixBtnCss" @click="createaVisit">
      <u-icon name="plus" color="#fff" size="30"></u-icon>
    </view>
    <popUpComponent :title="titles" :modificationStatus="modificationStatus" :publishID="publishID"
      :publishStatus="publishStatus" ref="popUpComponentRef" @getList="refreshList">
    </popUpComponent>
    <u-popup ref="bhPopup"></u-popup>
    <u-popup ref="bhPopup" :show="zfShow">
      <view class="popCss">
        <view class="padding-top text-lg text-center">
          作废
        </view>
        <view class="padding">
          <u-textarea v-model="zfRemarks" placeholder="请简单描述原因"></u-textarea>
        </view>
        <view class="flex justify-between">
          <view class="w50" @click="zfShow = false">
            <u-button>取消</u-button>
          </view>
          <view class="w50" @click="zfConfirm">
            <u-button :customStyle="{color:'#CF000D'}">确定</u-button>
          </view>
        </view>
      </view>
    </u-popup>
    <TabBar :currentPagePath="this.$route.meta.pagePath"></TabBar>
    <!-- 字典下拉 -->
    <u-picker :show="pickerShow" ref="uPicker" closeOnClickOverlay :columns="columns" @cancel="selectCancel"
      @close="selectCancel" keyName="label" @confirm="selectConfirm"></u-picker>
    <!-- 公司下拉-->
    <u-picker :show="gsShow" ref="gsPicker" :title="gsName" closeOnClickOverlay :columns="companyList"
      @cancel="gsCancel" @close="gsCancel" keyName="label" @confirm="gsConfirm" @change="changeHandler"></u-picker>
    <!-- 时间下拉开始 -->
    <u-datetime-picker :show="datetimeShow" title="开始财年" :value="searchForm.startFiscalYear" closeOnClickOverlay
      @confirm="dateConfirm" @cancel="timeCancel" @close="timeCancel" mode="year"></u-datetime-picker>
    <!-- 时间下拉结束 -->
    <u-datetime-picker :show="datetimeShowTwo" title="结束财年" :value="searchForm.finishFiscalYear" closeOnClickOverlay
      @confirm="dateConfirm2" @cancel="timeCancel2" @close="timeCancel2" mode="year"></u-datetime-picker>
  </view>
</template>

<script>
  import {
    getMcVisitList,
    submitAuditOne,
    submitAuditTwo,
    submitModificationOne,
    submitModificationTwo,
    getCompanyCascader,
    cancelMcVisit
  } from '@/api/charge.js'
  import * as dd from 'dingtalk-jsapi'
  import popUpComponent from '@/components/popUpComponent/popUpComponent.vue'
  export default {
    components: {
      popUpComponent
    },
    props: {

    },
    data() {
      return {
        currentName: '',
        columns: [],
        gsColumns: [],
        companyOption: [],
        regionName: [],
        groupName: [],
        companyName: [],
        gsShow: false,
        pickerShow: false,
        datetimeShow: false,
        datetimeShowTwo: false,
        gsName: "",
        searchForm: {
          year: '',
          startFiscalYear: '',
          finishFiscalYear: '',
          companyCode: '',
          status: '',
          type: ''
        },
        model: {
          companyCode: "",
          company: "",
          status: '',
          type: '',
          year: ''
        },
        searchList: [{
            title: '财年',
            name: 'year',
            key: 'year',
            type: 'time'
          },
          {
            title: '项目公司',
            name: 'companyCode',
            type: 'select',
            key: 'company',
          },
          {
            title: '状态',
            name: 'status',
            type: 'select',
            key: 'status',
            dict: 'sys_mc_visit_status'
          },
          {
            title: '类型',
            name: 'type',
            type: 'select',
            key: 'type',
            dict: 'sys_mc_visit_type'
          }
        ],
        params: {
          pageNum: 1,
          pageSize: 10,
          userName: "",
          isMyAuditing: "",
          companyCode: "",
          statusCode: "",
          ticketType: "",
          startFiscalYear: "",
          finishFiscalYear: ""
        },
        status: "loadmore",
        list: [],
        total: null,
        title: "用户拜访/收费",
        keyword: "",
        moreShow: false,
        actionStyle: {
          'color': '#fff',
          'background': '#EC1E19',
          'borderRadius': "15px",
          'width': '60px',
          'height': '25px',
          'line-height': '25px',
        },
        loginOutShow: false,
        approvalValue: [],
        approval: [{
          name: "待我审批"
        }],
        titles: '同意',
        publishStatus: "",
        modificationStatus: "",
        publishID: 0,
        zfShow: false,
        zfRemarks: "",
        ZfId: "",
        isCN: false,
      }
    },
    computed: {
      companyList() {
        return [this.regionName, this.groupName, this.companyName];
      }
    },
    onReachBottom() {
      let allTotal = this.params.pageNum * this.params.pageSize
      if (allTotal < this.total) {
        //当前条数小于总条数 则增加请求页数
        this.params.pageNum++;
        this.status = 'loading';
        this.initData() //调用加载数据方法
      } else {
        this.status = "nomore"
        // console.log('已加载全部数据')
      }
    },
    onPullDownRefresh() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.searchForm = {}
      this.isCN = false;
      this.keyword = "";
      this.initData();
      setTimeout(() => {
        //结束下拉刷新
        uni.stopPullDownRefresh();
      }, 500);
    },
    onLoad() {
      this.initData();
      this.getCompanyCascader();
      let that = this;
      // 监听其他页面返回后刷新
      uni.$on('update', function(data) {
        console.log("检测刷新");
        that.initData();
      })
    },
    onShow() {},
    methods: {
      selectConfirm(e) {
        console.log('打印selectConfirm', e);
        let data = e.value[0].value;
        let dataLabel = e.value[0].label;
        console.log('打印data', data);
        if (this.currentName === 'status') {
          this.searchForm.status = dataLabel;
          this.model.status = data;
          this.params.statusCode = data;
        } else if (this.currentName == 'type') {
          this.searchForm.type = dataLabel;
          this.model.type = data;
          this.params.ticketType = data;
        }
        this.pickerShow = false;
        this.currentName = '';
        this.initData()
      },
      selectCancel(e) {
        this.pickerShow = false;
        this.currentName = '';
      },
      gsConfirm(e) {
        console.log("公司", e);
        this.model.regionName = e.value[0]?.value;
        this.model.groupName = e.value[1]?.value;
        this.model.companyName = e.value[2]?.label;
        this.model.companyCode = e.value[2]?.value;
        this.gsShow = false;
        this.searchForm.companyCode = this.model.companyName.slice(0, 5) + '...';
        this.params.companyCode = this.model.companyCode;
        this.initData();
        this.currentName = '';
      },
      gsCancel() {
        this.gsShow = false;
        this.currentName = '';
      },
      // 项目公司切换
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          indexs
          // 微信小程序无法将picker实例传出来，只能通过ref操作
        } = e
        console.log(e);
        // 当第一列值发生变化时，变化第二列(后一列)对应的选项
        let [regionIndex, groupIndex, companyIndex] = indexs;
        if (columnIndex === 0) {
          this.gsName = value[0].label;
          console.log(0, this.regionName)
          // this.regionName = this.regionName[index]?.children || [];
          this.groupName = this.regionName[index]?.children || [];
          this.companyName = this.groupName[0]?.children || [];
          console.log(1, this.regionName)
          console.log(2, this.groupName)
          console.log(3, this.companyName)
          this.$refs.gsPicker.setIndexs([index, 0, 0], true)
        } else if (columnIndex === 1) {
          this.gsName = value[1].label;
          this.groupName = this.regionName[index]?.children || [];
          this.companyName = this.groupName[0]?.children || [];
          this.$refs.gsPicker.setIndexs(indexs, true)
        } else if (columnIndex === 2) {
          this.gsName = value[2].label;
        }
        // let data2 = value[0].children;
        // let data3 = data2[0].children;
        // picker为选择器this实例，变化第二列对应的选项
        // this.gsColumns = [this.regionName, data2, data3]
        console.log("选择后", this.gsColumns);
      },
      dateConfirm(e) {
        let time = this.$u.timeFormat(e.value, 'yyyy');
        console.log("选择时间", time);
        // this.model[this.currentName] = time;
        this.searchForm.startFiscalYear = time;
        this.params.startFiscalYear = time;
        this.datetimeShow = false;
        this.datetimeShowTwo = true;
        this.currentName = '';
      },
      timeCancel() {
        this.datetimeShow = false;
        this.currentName = '';
      },
      dateConfirm2(e) {
        let time = this.$u.timeFormat(e.value, 'yyyy');
        console.log("选择时间", time);
        // this.model[this.currentName] = time;
        if (time < this.params.startFiscalYear) {
          uni.$u.toast('结束财年需大于开始财年');
          return;
        }
        this.searchForm.finishFiscalYear = time;
        this.params.finishFiscalYear = time;
        this.initData();
        this.datetimeShowTwo = false;
        this.isCN = true;
        this.currentName = '';
      },
      timeCancel2() {
        this.datetimeShowTwo = false;
        this.currentName = '';
      },
      async getCompanyCascader() {
        this.companyOption = (await getCompanyCascader()).data;
        this.companyOption.forEach(item1 => {
          this.regionName.push(item1);
          item1.children.forEach(item2 => {
            this.groupName.push(item2);
            item2.children.forEach(item3 => {
              this.companyName.push(item3);
            });
          });
        });
        console.log("当前公司类", this.companyOption);
      },
      async openPicker(data) {
        console.log("下拉data", data)
        this.currentName = data.key;
        console.log('打印data-===', data);
        if (data.type === 'select') {
          if (data.key == 'company') {
            this.gsColumns = [this.regionName, this.groupName, this.companyName];
            this.gsName = `${this.regionName[0].label}`;
            this.gsShow = true;
          } else {
            let dict = data.dict;
            let dictArr = this.getDictDatas(dict);
            this.columns = [dictArr];
            this.pickerShow = true;
          }
        } else {
          console.log('打印data===', data);
          this.datetimeShow = true;
          // this.showTimeParams.showStartDailog = true;
        }
      },
      // 修改按钮权限
      editPermission(item) {
        const {
          statusCode
        } = item
        return statusCode === 'EDITING' && this.$checkPermi(['schsf:mcVisit:edit'])
      },
      // 通过/驳回按钮权限(一级审核、二级审核、异动一级审批)
      auditPermission(item) {
        const {
          publishStatus,
          modificationStatus
        } = item;
        // 发起审核
        const auditPer = (publishStatus === 'PENDING_LEVEL_1_AUDIT' && this.$checkPermi([
            'schsf:mcVisit:ticket_submitAuditOne'
          ])) ||
          (publishStatus === 'PENDING_LEVEL_2_AUDIT' && this.$checkPermi(['schsf:mcVisit:ticket_submitAuditTwo']))
        // 异动审核
        const changeAuditPer = publishStatus === 'APPROVED' &&
          ((modificationStatus === 'PENDING_LEVEL_1_AUDIT' && this.$checkPermi([
              'schsf:mcVisit:modification_submitAuditOne'
            ])) ||
            modificationStatus === 'PENDING_LEVEL_2_AUDIT' && this.$checkPermi([
              'schsf:mcVisit:modification_submitAuditTwo'
            ]))

        return auditPer || changeAuditPer
      },
      // 发起异动权限
      publishChangePermission(item) {
        const {
          statusCode
        } = item;
        return statusCode === 'APPROVED' && this.$checkPermi(['schsf:mcVisit:modification']) && (item.ticketType ===
          '2' || item.ticketType === '3')
      },
      // 作废权限
      cancelPermission(item) {
        return (item.publishStatus === 'EDITING' || item.statusCode === 'APPROVED') && this.$checkPermi([
          'schsf:mcVisit:cancel'
        ])
      },
      bfColorStatus(status, type) {
        const bgColorMap = {
          '3': '#EFF1FD',
          '2': '#EFF1FD',
          '1': '#FFF6E6',
          '0': '#F5F5F7',
        };
        const textColorMap = {
          '3': '#5875EB',
          '2': '#5875EB',
          '1': '#FFAD00',
          '0': '#999DB0',
        };

        if (type === 'bg') {
          return bgColorMap[status] || '';
        } else if (type === 'color') {
          return textColorMap[status] || '';
        }
      },
      colorStatus(status, type) {
        const bgColorMap = {
          'APPROVE': '#EFF1FD',
          'EDITING': '#FAE6E7',
          'APPROVED': '#E6F7F7',
          'CANCEL': '#F5F5F7'
        };
        const textColorMap = {
          'APPROVE': '#5875EB',
          'EDITING': '#CF000D',
          'APPROVED': '#00AEAA',
          'CANCEL': '#999DB0'
        };

        if (type === 'bg') {
          return bgColorMap[status] || '';
        } else if (type === 'color') {
          return textColorMap[status] || '';
        }
      },
      refreshList() {
        this.params.pageNum = 1
        this.initData()
      },
      async initData() {
        let {
          code,
          rows,
          total
        } = await getMcVisitList(this.params);
        if (code === 200) {
          if (this.params.pageNum > 1) {
            this.list = [...this.list, ...rows]
          } else {
            this.list = rows;
          }
          if (this.total < this.params.pageNum * this.params.pageSize) {
            this.status = "nomore"
          }
          this.total = total;
          console.log('list', JSON.parse(JSON.stringify(this.list)));
        }
      },
      viewDetail(item) {
        console.log('item', JSON.parse(JSON.stringify(item)));
      },
      onSearch(e) {
        this.params.pageNum = 1;
        this.params.userName = this.keyword;
        this.initData()
        console.log("搜索", e);
      },
      onClear() {
        this.params.pageNum = 1;
        this.keyword = "";
        this.params.userName = "";
        this.initData()
      },
      checkboxChange(e) {
        console.log(e);
        if (e.length) {
          this.params.isMyAuditing = "Y";
        } else {
          this.params.isMyAuditing = "其他";
        }
        this.params.pageNum = 1;
        this.initData();
      },
      handleDetail(item) {
        uni.navigateTo({
          url: '/pages/charge/visitsAndFees/detail?objData=' + JSON.stringify(item)
        })
      },
      // 拒绝按钮
      handleRefuse(item) {
        this.titles = "拒绝";
        this.publishStatus = item.publishStatus;
        this.modificationStatus = item.modificationStatus;
        this.publishID = item.id;
        this.$refs.popUpComponentRef.open();
      },
      // 同意按钮
      handleAgree(item) {
        console.log(item);
        this.publishStatus = item.publishStatus;
        this.publishID = item.id;
        this.modificationStatus = item.modificationStatus;
        this.titles = "同意";
        this.$refs.popUpComponentRef.open();
      },
      // 修改
      handleEdit(item) {
        let obj = JSON.stringify(item)
        uni.navigateTo({
          url: `/pages/charge/visitsAndFees/createaVisit?objData=${obj}&operation=edit`
        })
      },
      //创建拜访/收费
      createaVisit() {
        uni.navigateTo({
          url: '/pages/charge/visitsAndFees/createaVisit?operation=add'
        })
      },
      // 数据异动
      dataChange(item) {
        let obj = JSON.stringify(item)
        uni.navigateTo({
          url: `/pages/charge/visitsAndFees/createaVisit?objData=${obj}&operation=yd`
        })
      },
      // 处理流程
      processFlow(item) {
        let id = item.id;
        uni.navigateTo({
          url: `/pages/charge/visitsAndFees/processFlow?id=${id}&type=cllc`
        })
      },
      // 异动流程
      changeFlow(item) {
        let id = item.id;
        uni.navigateTo({
          url: `/pages/charge/visitsAndFees/processFlow?id=${id}&type=ydlc`
        })
      },
      // 作废
      giveUpVoid(item) {
        console.log("作废", item);
        this.ZfId = item.id;
        this.zfShow = true;
      },
      // 作废确定
      async zfConfirm(e) {
        console.log(e);
        let data = {
          id: this.ZfId,
          remarks: this.zfRemarks
        }
        console.log("作废数据", data);
        const result = await cancelMcVisit(data);
        if (result.code === 200) {
          uni.$u.toast('作废成功');
          this.initData();
        } else {
          uni.$u.toast(result.msg)
        }
        this.zfShow = false
      },
      loginOut() {
        this.$modal.confirm('您当前确定要退出吗?', '退出登录').then(() => {
          //钉钉直接退出微应用
          if (this.$isDing) {
            console.log("退出钉钉")
            dd.biz.navigation.close({
              onSuccess: function(result) {
                console.log(result, 'result')
              },
              onFail: function(err) {
                console.log(err, 'err')
              }
            });
          } else {
            this.$store.dispatch('Logout').then((res) => {
              uni.reLaunch({
                url: '/pages/login/mobile'
              })
            })
          }
        }).catch((e) => {
          console.log("取消", e);
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .topSelectCss {
    padding: 10px 20px;
    background: #fff;
  }

  /deep/.u-search__content {
    width: 70vw;
    padding-right: 140rpx;
  }

  /deep/.u-search__action {
    position: absolute;
    left: 50%;
  }

  .nodeCss {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25rpx auto;
    border-radius: 20rpx;
    width: 95%;
    height: 80rpx;
    background: #EFF1FD;
    color: #5875EB;
    text-align: center;
  }


  .nodeCss::after {
    content: '';
    position: absolute;
    top: 0%;
    right: 25rpx;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #EFF1FD;
    border: 1px solid #EFF1FD;
    border-style: none none solid solid;
  }

  .fixBtnCss {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 120rpx;
    height: 120rpx;
    position: fixed;
    background: #5875EB;
    right: 20rpx;
    bottom: 150rpx;
  }

  .popoverCss {
    padding: 20rpx;
    border-radius: 30rpx;
    color: #fff;
    background: #4C4C4C;
  }
</style>