<template>
    <div class="app-container">
      <van-sticky>
      <van-nav-bar
        title=""
      >
        <template #left>
            <van-icon name="location" color="3A80FB" size="16"/>
            <p  style="color: #878787;margin-left: 5px" @click="selectDept">{{deptName}}</p>
          <van-popup v-model="villageVisbile" round position="bottom" get-container="#app">
            <van-cascader
              v-model="villageValue"
              title="请选择所在村"
              :options="hcAreaInfoOption"
              @close="hcAreaInfoClose"
              @finish="hcAreaInfoFinish"
              active-color="#1989fa"
              :field-names="hcAreaInfoFieldName"
            />
          </van-popup>
        </template>
        <template #right>
<!--          <van-icon name="wap-nav" color="#000" size="18"/>-->
          <p  style="color: #878787;margin-left: 5px" @click="bookVisbile = true">{{bookName}}</p>
          <van-popup v-model="bookVisbile" round position="bottom" get-container="#app">
            <van-picker
              title="请选择账套"
              show-toolbar
              :columns="bookList"
              @confirm="onConfirmBook"
              @cancel="onCancelBook"
              value-key="bookName"
            />
          </van-popup>
        </template>
      </van-nav-bar>
      </van-sticky>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width: 96%;margin: 2%;height:128px;border-radius: 6px;">
        <van-swipe-item v-for="(image,index) in images" :key="index">
          <img :src="image" style="width:100%;height: 128px"/>
        </van-swipe-item>
      </van-swipe>
<!--      <van-row style="min-height: 100px;" class="indexCard">-->
<!--        <van-cell style="border-radius: 6px;" is-link :to="{path:'done',query:{fr:'workbench'}}">-->
<!--          <template #title>-->
<!--            <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p>-->
<!--            <p style="font-weight: bold;font-size: 18px;display: inline-block;">待办</p>-->
<!--          </template>-->
<!--          <template #label>-->
<!--            <p style="padding-left: 10px;">-->
<!--              {{taskList&&taskList.length>0?taskList[0].projectName+'等，共'+taskList.length+'条':'暂无待办事项'}}-->
<!--            </p>-->
<!--          </template>-->
<!--        </van-cell>-->
<!--      </van-row>-->
      <van-row  class="indexCard" v-for="( item , index) in menusList" :key="index">
        <van-cell style="border-radius: 6px;">
          <template #title>
            <p style="font-weight: bold;font-size: 18px;display: inline-block">{{item.modleName}}</p>
          </template>
        </van-cell>
        <van-grid :border="false">
<!--          'yinnongListBalanceRanking'-->
          <van-grid-item :text="childrenItem.menuName" :to="{name:childrenItem.menuUrl}" v-for="( childrenItem , childrenIndex ) in item.menus" :key="childrenItem.id" >
            <div class="icon all" slot="default"  >
              <img :src="require('@/assets/images/sunVillage_info/' + childrenItem.menuIcon)" alt />
            </div>
            <p style="margin-top: 5px;color: #666666;">{{childrenItem.menuName}}</p>
          </van-grid-item>
        </van-grid>
      </van-row>

<!--      <van-row  class="indexCard">-->
<!--        <van-cell style="border-radius: 6px;">-->
<!--          <template #title>-->
<!--            <p style="font-weight: bold;font-size: 18px;display: inline-block">支出申请</p>-->
<!--          </template>-->
<!--        </van-cell>-->
<!--        <van-grid :border="false">-->
<!--          <van-grid-item text="银行卡转账" :to="{name:'approvalList'}" >-->
<!--            <div class="icon" slot="default" style="background:#FF4646;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y1.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">银行卡转账</p>-->
<!--          </van-grid-item>-->
<!--          &lt;!&ndash;          <van-grid-item text="代管转账" :to="{name:'approvalList4'}" >&ndash;&gt;-->
<!--          &lt;!&ndash;            <div class="icon" slot="default" style="background:#c568f5;" >&ndash;&gt;-->
<!--          &lt;!&ndash;              <img src="../../../static/images/onlineHome/icon_Y4.png" alt />&ndash;&gt;-->
<!--          &lt;!&ndash;            </div>&ndash;&gt;-->
<!--          &lt;!&ndash;            <p style="margin-top: 5px;color: #666666;">代管转账</p>&ndash;&gt;-->
<!--          &lt;!&ndash;          </van-grid-item>&ndash;&gt;-->
<!--          <van-grid-item text="信用卡还款" :to="{name:'approvalList2'}" >-->
<!--            <div class="icon" slot="default" style="background:#3ac2db;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y2.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">信用卡还款</p>-->
<!--          </van-grid-item>-->
<!--          &lt;!&ndash;          <van-grid-item text="现金提现" :to="{name:'approvalList10'}" >&ndash;&gt;-->
<!--          &lt;!&ndash;            <div class="icon" slot="default" style="background:#FF6464;" >&ndash;&gt;-->
<!--          &lt;!&ndash;              <img src="../../../static/images/onlineHome/icon_Y6.png" alt />&ndash;&gt;-->
<!--          &lt;!&ndash;            </div>&ndash;&gt;-->
<!--          &lt;!&ndash;            <p style="margin-top: 5px;color: #666666;">现金提现</p>&ndash;&gt;-->
<!--          &lt;!&ndash;          </van-grid-item>&ndash;&gt;-->
<!--          <van-grid-item text="备付金支出" :to="{name:'approvalList11'}" >-->
<!--            <div class="icon" slot="default" style="background:#7790FE;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y7.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">备付金支出</p>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item text="汇票支出" :to="{name:'approvalList12'}" >-->
<!--            <div class="icon" slot="default" style="background:#539ffd;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y8.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">汇票支出</p>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item text="收款账户" :to="{name:'collectionList'}" >-->
<!--            <div class="icon" slot="default" style="background:#7dda4f;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y9.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">收款账户</p>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item text="付款账户" :to="{name:'paymentAccountList'}" >-->
<!--            <div class="icon" slot="default" style="background:#FF4646;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y10.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">付款账户</p>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item text="开户行" :to="{name:'yinnongBankOfDepositList'}" >-->
<!--            <div class="icon" slot="default" style="background:#FF6464;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y6.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">开户行</p>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item text="重大事项" :to="{name:'approvalList13'}" >-->
<!--            <div class="icon" slot="default" style="background:#c568f5;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Y3.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">重大事项</p>-->
<!--          </van-grid-item>-->
<!--        </van-grid>-->
<!--      </van-row>-->

<!--      <van-row  class="indexCard">-->
<!--        <van-cell style="border-radius: 6px;">-->
<!--          <template #title>-->
<!--            <p style="font-weight: bold;font-size: 18px;display: inline-block">执法监管</p>-->
<!--          </template>-->
<!--        </van-cell>-->
<!--        <van-grid :border="false">-->
<!--          <van-grid-item text="纠纷处理" :to="{name:'sunVillageInfoArbitrationList',query: {status:'0'}}" >-->
<!--            <div class="icon all" slot="default"  >-->
<!--              <img src="../../../static/images/66.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">纠纷处理</p>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item text="巡查执法" :to="{name:'yinnongSupervisionList',query: {status:'0'}}" >-->
<!--            <div class="icon all" slot="default" style="background:#1D6FE9;" >-->
<!--              <img src="../../../static/images/onlineHome/icon_Z12.png" alt />-->
<!--            </div>-->
<!--            <p style="margin-top: 5px;color: #666666;">巡查执法</p>-->
<!--          </van-grid-item>-->
<!--        </van-grid>-->
<!--      </van-row>-->

      <yinnongIndex></yinnongIndex>
    </div>
</template>

<script>
  import yinnongIndex from "../yinnongIndex";
  import {getInfo} from "../../api/login";
  import {changeDept, ListTodo,changeBook,menus} from "../../api/onlineHome/done";
  import {treeselectByUser,bookListByDeptId} from "../../api/homestead";
    export default {
      components: {
        yinnongIndex
      },
        name: "workbench",
      data() {
        return {
          list1: [],
          images:['../../../static/images/onlineHome/banner_01.png'],
          deptName:"",
          queryParams: {
            pageNum: 1,
            pageSize: 100,
          },
          taskList:[],
          //省市区区级list
          hcAreaInfoOption: [],
          //省市区区级显示
          villageVisbile: false,
          //选中的值
          villageValue: "",
          hcAreaInfoFieldName: {
            text: "label",
            value: "value",
            children: "children",
          },
          //账套列表
          bookVisbile:false,
          bookList:[],
          bookName:"",
          bookId:"",
          book:"",
          menusList:[]
        };
      },
      created() {
        getInfo().then(response => {
          this.bookName = response.user.bookName
          this.deptName = response.user.deptName
          this.getBookList(response.user.loginDeptId);
        });

        treeselectByUser().then((res) => {
          if (res.code == 200) {
            this.hcAreaInfoOption = res.data;
          }
        }),
          this.$set(this.queryParams, "systemType", '4');
        ListTodo(this.queryParams).then((response) => {
          this.taskList = response.rows
        })

        menus({identityType : 4}).then((response) => {
          this.menusList = response.data
        })


      },
      methods:{
        onConfirmBook(e){
          this.bookVisbile = false
          this.bookName = e.bookName
          let param={"loginBookId":e.id}
          changeBook(param).then((response) => {
            if (response.code === 200) {
              this.$store.dispatch("GetInfo").then(() => {
                // this.$router.go(0);
                window.location.href = "/yinnong/workbench";
              });
            }
          });
        },
        onCancelBook(e){
          this.bookVisbile = false
        },
        getBookList(e){
          let params = {
            loginDeptID:e
          }
          bookListByDeptId(params).then((response) => {
            if (response.code == 200) {
              this.bookList = response.rows;

            }
          })
        },
        selectDept(){
          this.villageVisbile = true;
        },
        //关闭选择地址弹窗
        hcAreaInfoClose() {
          this.villageVisbile = false;
        },
        hcAreaInfoFinish({ value, selectedOptions, tabIndex }) {
          // 切换部门
          let Depquery={"loginDeptID":value}
            changeDept(Depquery).then((response) => {
              if (response.code === 200) {
                this.$store.dispatch("GetInfo").then(() => {
                  // this.$router.go(0);
                  window.location.href = "/yinnong/workbench";
                });
              }
            });
          this.villageVisbile = false;
        },
      }
    }
</script>

<style scoped>
    >>>.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 144px;
    text-align: center;
  }
  >>>.van-grid-item__content{
    padding:0.213333rem;
  }
  >>>.van-cell::after{
    border: none;
  }
  >>>.app-container{
    padding:0;
  }
  >>> .icon{
    padding: 15px;
    border-radius: 10px;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    text-align:center;
  }
  >>> .icon img{
    width:50px;
  }
  >>> .icon.all{
    width: 80px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  >>> .icon.all img{
    width: 80px;
    /* padding: 0; */
  }
  >>> .indexCard{
    margin:2%;width:96%;padding:20px 0;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff
  }
</style>
