<template>
  <a-card class="CarWashManagement" :bordered="false">
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item class="search-item" label="网点名称">
              <a-input v-model.trim="queryParam.name" placeholder="请输入网点名称" @pressEnter="$refs.table.refresh(true)" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="营业状态">
              <v-select ref="businessStatus" allowClear placeholder="请选择营业状态" v-model="queryParam.businessStatus" code="STORE_BUSINESS_STATUS"></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="设备状态">
              <v-select ref="deviceStatus" allowClear placeholder="请选择设备状态" v-model="queryParam.deviceDTO.deviceStatus" code="DEVICE_STATUS"></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="省">
              <a-select v-model="queryParam.addrProvince" placeholder="请选择省" @change="getCityList" allowClear>
                <a-select-option v-for="item in addrProvinceList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item class="search-item" label="市">
              <a-select v-model="queryParam.addrCity" placeholder="请选择市" @change="getAreaList" allowClear>
                <a-select-option v-for="item in addrCityList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button type="" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 新建 -->
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button>
    </div>
    <!-- 表格列表 -->
    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" bordered >
      <!-- 营业时间 -->
      <template slot="businessHours" slot-scope="text, record">{{ record.beginTime.substr(0,5) + '-' + record.endTime.substr(0,5) }}</template>
      <!-- 设备状态 -->
      <template slot="deviceStatus" slot-scope="text, record">{{ record.deviceStatus ? $refs.deviceStatus.getNameByCode(record.deviceStatus) : '-' }}</template>
      <!-- 营业状态 -->
      <template slot="businessStatus" slot-scope="text, record">{{ record.businessStatus ? $refs.businessStatus.getNameByCode(record.businessStatus) : '-' }}</template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-tooltip placement="left" overlayClassName="btn-cont">
          <template slot="title">
            <div class="btn-set-cont">
              <p class="set-sub-btn normal" @click="setStoreUpdateStatus(record, 'OPEN')" v-if="record.deviceStatus != 'PAUSE' && record.businessStatus != 'OPEN'">
                <a-icon type="check-circle" class="icon" />
                正常营业
              </p>
              <p class="set-sub-btn suspension" @click="setStoreUpdateStatus(record, 'CLOSED')" v-if="record.businessStatus != 'CLOSED'">
                <a-icon type="pause-circle" class="icon" />
                暂停营业
              </p>
              <p class="set-sub-btn soon" @click="setStoreUpdateStatus(record, 'TO_BE_OPENED')" v-if="record.deviceStatus != 'PAUSE' && record.businessStatus != 'TO_BE_OPENED'">
                <a-icon type="play-circle" class="icon" />
                即将开业
              </p>
            </div>
          </template>
          <a-icon type="setting" title="设置" v-if="record.deviceStatus != 'PAUSE'" :style="{ fontSize: '20px', color: '#19be6b', padding: '0 10px' }" />
        </a-tooltip>
        <a-icon type="setting" title="设置" v-if="record.deviceStatus == 'PAUSE'" @click="tooltipSet" :style="{ fontSize: '20px', color: '#19be6b', padding: '0 10px' }" />
        <a-icon type="edit" title="编辑" @click="modalHandle('edit', record)" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
        <a-icon type="eye" title="查看详情" @click="modalHandle('details', record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
        <a-icon type="delete" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
        <a-icon type="qrcode" title="查看小程序码" @click="getQrCode(record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
      </template>
    </s-table>
    
    <!-- 新增/编辑 洗车机 -->
    <add-car-wash-modal
      :openModal="openModal"
      :pageType="pageType"
      :carWashId="carWashId"
      @success="carWashSubmit"
      @close="closeModal"
    />
    <!-- 查看详情 洗车机 -->
    <details-car-wash-modal
      :openModal="openDetailsModal"
      :carWashId="carWashId"
      @close="closeDetailsModal"
    />
    <!-- 查看小程序码 -->
    <a-modal class="qrCodeModal" title="查看小程序码" :width="500" :footer="null" :destroyOnClose="true" @cancel="isQrCodeModal=false" v-model="isQrCodeModal">
      <img :src="qrCode" width="400" height="400" class="qrCode" />
      <a-button type="primary" class="downQrCode" @click="downloadCode">下载小程序码</a-button>
    </a-modal>
  </a-card>
</template>

<script>
  import { STable, VSelect } from '@/components'
  import AddCarWashModal from './AddCarWashModal.vue'
  import DetailsCarWashModal from './DetailsCarWashModal.vue'
  import { getProvince, getCityByPro } from '@/api/lookup'
  import { storeQuery, storeFind, findItem, storeDel, storeQrCode, storeUpdateStatus } from '@/api/car-wash'
  export default{
    name: 'CarWashManagement',
    components: { STable, VSelect, AddCarWashModal, DetailsCarWashModal },
    data(){
      return{
        queryParam: {
          name: '',  //  网点名称
          businessStatus: '',  //  营业状态
          deviceDTO: { deviceStatus: '' },  //  设备状态
          addrProvince: undefined,  //  省
          addrCity: undefined  //  市
        },
        columns: [
          { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
          { title: '设备ID', dataIndex: 'deviceNos', width: '100', align: 'center' },
          { title: '网点名称', dataIndex: 'name', width: '100', align: 'center' },
          { title: '省', dataIndex: 'addrProvinceName', width: '100', align: 'center' },
          { title: '市', dataIndex: 'addrCityName', width: '100', align: 'center' },
          { title: '地址', dataIndex: 'addrDetail', width: '100', align: 'center' },
          { title: '营业时间', scopedSlots: {customRender: 'businessHours'}, width: '100', align: 'center' },
          { title: '设备状态', scopedSlots: {customRender: 'deviceStatus'}, width: '100', align: 'center' },
          { title: '营业状态', scopedSlots: {customRender: 'businessStatus'}, width: '100', align: 'center' },
          { title: '操作', scopedSlots: {customRender: 'action'}, width: '265', align: 'center' }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return storeQuery(Object.assign(parameter, this.queryParam)).then(res => {
            const no = (res.data.pageNo - 1) * res.data.pageSize
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
            }
            return res.data
          })
        },
        openModal: false,  //  新增/编辑 洗车机  弹框展示状态
        pageType: '',  //  新增/编辑 洗车机  页面类型
        openDetailsModal: false,  //  查看详情 洗车机  弹框展示状态
        addrProvinceList: [],  //  省列表数据
        addrCityList: [],  //  市列表数据
        isQrCodeModal: false,  //  查看小程序码   弹框展示状态
        qrCode: '',  //  小程序码
        carWashId: '',  //  网点id
      }
    },
    methods: {
      //  新建/编辑/查看
      modalHandle(type, item){
        this.pageType = type
        if(type == 'add'){
          this.carWashId = ''
          this.openModal = true
          this.openDetailsModal = false
        }else if(type == 'edit'){
          this.carWashId = String(item.id)
          this.openModal = true
          this.openDetailsModal = false
        }else if(type == 'details'){
          this.carWashId = String(item.id)
          this.openDetailsModal = true
          this.openModal = false
        }
      },
      // 新增编辑  提交成功
      carWashSubmit(){
        this.$refs.table.refresh(true)
        this.openModal = false
      },
      // 删除
      del(item){
        const _this = this
        _this.$confirm({
          title: '提示',
          content: '确定要删除吗？',
          onOk () {
            storeDel({ id: item.id }).then(res => {
              if(res.status == 200){
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }else{
                _this.$message.error(res.message)
              }
            })
          }
        })
      },
      //  重置
      reset(){
        this.queryParam = {
          name: '',  //  网点名称
          businessStatus: '',  //  营业状态
          deviceDTO: { deviceStatus: '' },  //  设备状态
          addrProvince: undefined,  //  省
          addrCity: undefined  //  市
        }
        this.$refs.table.refresh(true)
      },
      // 查看小程序码
      getQrCode(item){
        storeQrCode({ id: item.id,deviceNo: item.deviceNos }).then(res => {
          if(res.status == 200){
            this.qrCode = 'data:image/png;base64,' + res.data
            this.isQrCodeModal = true
          }else{
            this.qrCode = ''
            this.$message.error(res.message)
          }
        })
      },
      //  下载小程序码
      downloadCode (){
        let link = document.createElement('a')
        link.href = this.qrCode
        link.download = 'qrCode.png'
        link.click()
      },
      // 更改网点营业状态
      setStoreUpdateStatus(item, businessStatus){
        storeUpdateStatus({ id: item.id, businessStatus: businessStatus }).then(res => {
          if(res.status == 200){
            this.$message.success(res.message)
            this.$refs.table.refresh(true)
          }else{
            this.$message.success(res.message)
          }
        })
      },
      //  设置提示
      tooltipSet(){
        this.$message.warning('洗车机设备离线（或暂停），暂不能设置营业状态！')
      },
      // 获取省列表
      getProvinceList() {
        const _this = this
        getProvince().then(res => {
          if (res.status == 200) {
            _this.addrProvinceList = res.data || []
          } else {
            _this.addrProvinceList = []
          }
        })
      },
      // 获取城市列表
      getCityList (val) {
        this.addrCityList = []
        this.queryParam.addrCity = undefined
        if (val == null || val == '') {
          this.addrProvinceName = ''
        } else {
          for (let i = 0; i < this.addrProvinceList.length; i++) {
            if (this.addrProvinceList[i].id == val) {
              this.addrProvinceName = this.addrProvinceList[i].name
              break
            }
          }
          this.getCityListRequest(val)
        }
      },
      getCityListRequest (val) {
        getCityByPro({id: val}).then(res => {
          if (res.status == 200) {
            this.addrCityList = res.data || []
          } else {
            this.addrCityList = []
          }
        })
      },
      // 获取区县列表
      getAreaList (val) {
        if (val == null || val == '') {
          this.addrCityName = ''
        } else {
          for (let i = 0; i < this.addrCityList.length; i++) {
            if (this.addrCityList[i].id == val) {
              this.addrCityName = this.addrCityList[i].name
              break
            }
          }
        }
      },
      // 新增、编辑 弹框关闭
      closeModal(){
        this.carWashId = ''
        this.openModal = false
      },
      // 详情 弹框关闭
      closeDetailsModal(){
        this.carWashId = ''
        this.openDetailsModal = false
      }
    },
    mounted(){
      //  获取省下拉
      this.getProvinceList()
    }
  }
</script>

<style lang="less">
  .CarWashManagement{
    .table-page-search-wrapper{
      .search-btn{
        margin-right: 10px;
      }
    }
  }
  // 查看小程序码  弹框
  .qrCodeModal{
    .qrCode{
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
    .downQrCode{
      display: block;
      margin: 40px auto 30px;
    }
  }
  .btn-cont{
    .ant-tooltip-inner{
      background-color: #fff;
    }
    .ant-tooltip-arrow:before{
      background-color: #fff;
    }
    .btn-set-cont{
      .set-sub-btn{
        padding: 5px 15px 6px;
        font-size: 12px;
        border: 1px dashed #dcdee2;
        border-radius: 4px;
        margin: 0;
        cursor: pointer;
      }
      .normal{
        color: rgb(0, 204, 0);
        border-color: rgb(0, 204, 0);
        margin: 7px 0;
        .icon{
          margin-right: 5px;
        }
      }
      .suspension{
        color: rgb(255, 85, 0);
        border-color: rgb(255, 85, 0);
        margin: 7px 0;
        .icon{
          margin-right: 5px;
        }
      }
      .soon{
        color: #2d8cf0;
        border-color: #2d8cf0;
        margin: 7px 0;
        .icon{
          margin-right: 5px;
        }
      }
    }
  }
</style>
