<template>
  <a-modal
    centered
    class="detail-network-modal"
    :footer="null"
    :maskClosable="false"
    title="查看详情"
    v-model="isShow"
    @cancle="isShow=false"
    :width="1000">
    <!-- 网点信息 -->
    <div v-if="detailsData">
      <a-row :gutter="35">
        <a-col :span="8" class="item-cont">
          <p class="item-label">网点名称：</p>
          <p class="item-main">{{ detailsData.name }}</p>
        </a-col>
        <a-col :span="16" class="item-cont">
          <p class="item-label">地址：</p>
          <p class="item-main">{{ detailsData.provinceName }}{{ detailsData.cityName }}{{ detailsData.districtName }}{{ detailsData.address }}</p>
        </a-col>
      </a-row>
      <a-row :gutter="35">
        <a-col :span="8" class="item-cont">
          <p class="item-label">纬度：</p>
          <p class="item-main">{{ detailsData.lat }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">经度：</p>
          <p class="item-main">{{ detailsData.lng }}</p>
        </a-col>
        <a-col :span="8" class="item-cont">
          <p class="item-label">投递时间段：</p>
          <p class="item-main">{{ detailsData.timeRuleName ? detailsData.timeRuleName : '--' }}</p>
        </a-col>
      </a-row>
      <a-row :gutter="35">
        <a-col :span="24" class="item-cont">
          <p class="item-label">兑换规则：</p>
          <p class="item-main">{{ detailsData.exRuleName ? detailsData.exRuleName : '--' }}</p>
        </a-col>
      </a-row>
    </div>
    <a-divider />
    <!-- 已绑设备 -->
    <div>
      <h3>已绑设备：</h3>
      <a-table
        ref="table"
        size="middle"
        :rowKey="record => record.id"
        :columns="columns"
        :dataSource="equipmentData"
        :loading="loading"
        :pagination="false"
        bordered>
        <!-- 设备状态 -->
        <template slot="onlineFlag" slot-scope="text, record">
          <span :class="record.onlineFlag==0 ? 'red' : record.onlineFlag==1 ? 'green' : ''">{{ record.onlineFlag == 0 ? '离线' : record.onlineFlag == 1 ? '在线' : '--' }}</span>
        </template>
        <!-- 工作状态 -->
        <template slot="state" slot-scope="text, record">
          <span v-if="record.deviceType!='STEELYARD'" :class="record.state==0 ? 'red' : record.state==1 ? 'green' : ''">{{ record.state == 0 ? '已禁用' : record.state == 1 ? '已启用' : '--' }}</span>
          <span v-else>--</span>
        </template>
      </a-table>
    </div>
    <div class="btn-cont"><a-button id="network-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
  </a-modal>
</template>

<script>
import { stationFind } from '@/api/station'
import { deviceListQuery } from '@/api/device'
export default {
  name: 'DetailsModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    networkId: {
      type: [Number, String],
      default: ''
    },
    networkNo: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      detailsData: null, //  网点数据
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '设备编号', dataIndex: 'srcDeviceCode', width: 200, align: 'center' },
        { title: '设备状态', scopedSlots: { customRender: 'onlineFlag' }, width: 200, align: 'center' },
        { title: '工作状态', scopedSlots: { customRender: 'state' }, width: 200, align: 'center' },
        { title: '箱体类型', dataIndex: 'deviceTypeName', width: 200, align: 'center' }
      ],
      equipmentData: [],
      loading: false
    }
  },
  methods: {
    //  获取详情
    getDetails () {
      stationFind({ id: this.networkId }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data
        }
      })
    },
    //  已绑设备
    getDevice () {
      this.loading = true
      deviceListQuery({ stationNo: this.networkNo }).then(res => {
        console.log(res)
        if (res.status == 200) {
          res.data.map((item, index) => {
            item.no = index + 1
          })
          this.equipmentData = res.data
        } else {
          this.equipmentData = []
        }
        this.loading = false
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.equipmentData = []
        this.$emit('close')
      }
    },
    networkId (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetails()
        this.getDevice()
      }
    }
  }
}
</script>

<style lang="less">
  .detail-network-modal{
    .ant-modal-body {
    	padding: 40px 40px 24px;
    }
    .item-cont {
    	margin-bottom: 15px;
    	display: flex;
    	.item-label {
    		width: 115px;
    		font-size: 14px;
    		color: rgba(0, 0, 0, 0.85);
    		flex-shrink: 0;
    	}
    	.item-main {
    		flex-grow: 1;
        word-break: break-all;
    		.wd-icon {
    			display: block;
    		}
    	}
    	.guidance-con {
    		border: 1px dashed #e8e8e8;
    		border-radius: 6px;
    		padding: 20px;
    		img {
    			max-width: 100%;
    		}
    	}
    	.period-price-con {
    		border-bottom: 1px solid #e8e8e8;
    	}
    	.item-period {
    		display: flex;
    		align-items: center;
    		justify-content: space-evenly;
    		flex-grow: 1;
    		border: 1px solid #e8e8e8;
    		border-width: 1px 1px 0;
    		text-align: center;
    		.period,
    		.period-price {
    			padding: 5px 0;
    			border-right: 1px solid #e8e8e8;
    		}
    		.period-price:last-child {
    			border-right: none;
    		}
    	}
    }
    .btn-cont {
    	text-align: center;
    	margin: 35px 0 10px;
    }
    .blue {
    	color: #1890FF;
    }
    .green {
    	color: #16b50e;
    }
    .red {
    	color: red;
    }
  }
</style>
