<template>
  <div class="mainPage flex-v">
    <div class="top">
      <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer.RealName ? userInfo.customer.RealName : userInfo.customer.CustomerName"></topCaseInfo>
    </div>
    <div class="content flex-item">
      <div>
        <ul>
          <li class="customer-card">
            <div class="list-box">
              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @record='record' @history='history' @remark='remark'></customerCard>
              <!-- <span class="noData" v-if="ajaxOff && !cardList.length">暂无数据</span> -->
              <noMore v-if="ajaxOff && hasPic"></noMore>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="mask" class="search-mask">
      <div class="mask-top">
        <input type="text" v-model="key">
        <i class="iconfont icon-sousuo search-icon"></i>
        <span @click="searchMask">搜索</span>
      </div>
      <div class="mask-bottom"></div>
    </div>
    <van-dialog
      v-model="showDialog"
      show-cancel-button
      title='添加备注'
      :before-close="beforeClose">
      <van-field
        v-model="message"
        type="textarea"
        placeholder="请输入备注"
        rows="3"
        autosize/>
    </van-dialog>
  </div>
</template>

<script>
import customerCard from '../../../components/customerCard/customerCard'
import active from '../../../common/icon/check-box-checked.png'
import normal from '../../../common/icon/check-box-empty.png'
import topCaseInfo from '../../../components/topCaseInfo/index'
import noMore from '../../../components/noMore/noMore'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('app')
const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('case')
const { mapActions: mapUserCenterActions } = createNamespacedHelpers('userCenter')
const { mapState: mpRemarkState, mapActions: mapRemarkActions } = createNamespacedHelpers('remark')

export default {
  name: '',
  data () {
    return {
      topCaseInfoData: {
        caseName: '',
        caseId: '',
        ShowSelect: false,
      },
      icon: {
        active: active,
        normal: normal
      },
      ajaxOff: false,
      hasPic: false,
      key: '',
      mask: true,
      checked: true,
      cardList: [],
      showDialog: false,
      remarkCustomerId: ''
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      CaseList: x => x.app.CaseList,
      CaseTableList: x => x.placeOrderForCoffee.CaseTableList,
    }),
    ...mapCaseState({
      caseTotal: x => x.caseTotal,
    })
  },
  components: {
    customerCard,
    topCaseInfo,
    noMore
  },
  created () {
    this.getCaseList().then((res) => {
      this.topCaseInfoData.caseId = this.userInfo.customer.BelongCaseId
      for (let i = 0; i < this.CaseList.length; i++) {
        if (this.CaseList[i].CaseId === this.topCaseInfoData.caseId) {
          this.topCaseInfoData.caseName = this.CaseList[i].CaseName
        }
      }
    })
  },
  methods: {
    ...mapUserCenterActions([
      'getCustomerList',
    ]),
    ...actions([
      'getCaseList',
    ]),
    ...caseTableActions([
      'getCaseTableList',
    ]),
    ...mapCaseActions([
      'getCaseTotal',
    ]),
    ...mapRemarkActions(['setRemark']),
    record (item) {
      // console.log(item)
      this.$router.push({ name: 'getRecord', query: { name: item.Name, phone: item.Phone, id: item.CustomerId } }).then(() => {
        this.getCustomerList({
          page: 1,
          pagesize: 10000,
          isrecommend: false,
          key: this.key,
        }).then((res) => {
          this.message = null
          this.cardList = []
          if (res) {
            for (var n = 0; n < res.length; n++) {
              if (res[n].RecommendId === this.userInfo.customer.MapUser) {
                res[n].showTag = true
              } else {
                res[n].showTag = false
              }
              this.cardList.push(res[n])
            }
          } else {
            this.hasPic = true
          }
          this.mask = false
          this.ajaxOff = true
        })
      })
    },
    remark (item) {
      // console.log(item)
      this.showDialog = true
      this.remarkCustomerId = item.CustomerId
    },
    history (item) {
      // console.log(item)
      this.$router.push({ name: 'history', query: { customerId: item.CustomerId } })
    },
    searchMask () {
      this.getCustomerList({
        page: 1,
        pagesize: 10000,
        isrecommend: false,
        key: this.key,
      }).then((res) => {
        if (res) {
          for (var n = 0; n < res.length; n++) {
            if (res[n].RecommendId === this.userInfo.customer.MapUser) {
              res[n].showTag = true
            } else {
              res[n].showTag = false
            }
            this.cardList.push(res[n])
          }
        } else {
          this.hasPic = true
        }
        // res = res || []
        // for (var n = 0; n < res.length; n++) {
        //   this.cardList.push({...res[n], invalid: false})
        // }
        this.mask = false
        this.ajaxOff = true
      })
    },
    showVanPicker () {
      this.showSelect = true
    },
    selectCase (val) { // 选择案场
      this.topCaseInfoData.caseName = val.CaseName
      this.topCaseInfoData.caseId = val.CaseId
      this.getCaseTableList({
        caseid: this.topCaseInfoData.caseId
      })
      this.showSelect = false
    },
    beforeClose (action, done) {
      if (action === 'confirm') {
        this.setRemark({ salesId: this.userInfo.customer.MapUser, customerId: this.remarkCustomerId, remark: this.message }).then(() => {
          done()
        })
      } else {
        done()
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>
