<template>
 <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="750px"
    :append-to-body="true"
    :before-close="close"
    :destroy-on-close="true"
    :close-on-click-modal="false">
   <el-form ref="form" :model="form" label-width="120px" label-position="top" style="max-height: 375px;overflow: auto;">
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
        <el-form-item label="运营企业" prop="custId" style="width: 50%;" >
          <span :class="loading?'el-icon-loading':''">{{detail.customer && detail.customer.name}}</span>
        </el-form-item>
         <el-form-item label="门店" prop="storeId" style="width: 50%;" >
            <span :class="loading?'el-icon-loading':''">{{detail.store && detail.store.name}}</span>
         </el-form-item>
     </flexbox>
     <flexbox
         class="ygp-form-items"
         align="flex-start"
         justify="flex-start">
         <el-form-item label="采集器编号" prop="colAddress" style="width: 50%;">
             <span :class="loading?'el-icon-loading':''">{{detail.colAddress}}</span>
         </el-form-item>
         <el-form-item label="类型" prop="typeId" style="width: 50%;">
           <span :class="loading?'el-icon-loading':''">{{detail.typeId && detail.typeId.desc}}</span>
         </el-form-item>
     </flexbox>
     <flexbox
          class="ygp-form-items"
          align="flex-start"
          justify="flex-start">
         <el-form-item label="备注" prop="label" style="width: 100%;">
            <span :class="loading?'el-icon-loading':''">{{detail.label}}</span>
         </el-form-item>
      </flexbox>
   </el-form>
   <div slot="footer" class="dialog-footer">
     <el-button @click="close">关 闭</el-button>
   </div>
 </el-dialog>
</template>
<script>

import { mapGetters } from 'vuex'
import CustomFieldsMixin from '@/mixins/CustomFields'
// import { getCollector } from "@/api/business/collector";
export default {
  mixins: [CustomFieldsMixin],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editId: [Number, String] //  编辑用
  },

  data() {
    return {
      loading: false,
      // 表单参数
      form: {},
      detail: {}
    }
  },

  computed: {
    ...mapGetters(['userInfo']),
    title() {
      return '采集器详情'
    }
  },

  created() {
    // 是编辑
    if (this.editId) {
      // this.getDetail()
    }
  },

  mounted() {
    document.body.appendChild(this.$el)
  },

  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },

  methods: {

    /**
     * 获取项目详情
     */
    getDetail() {
      this.loading = true
      getCollector({
        colDeviceId: this.editId
      }).then(res => {
          const data = res.data || {}
          this.detail = data
          // console.log("getDetail :" + JSON.stringify(data))
          this.$set(this.form,'custId', data.custId)
          this.$set(this.form,'storeId', data.storeId)
          this.$set(this.form,'colAddress', data.colAddress)
          const deviceCategory = JSON.parse(data.typeId || {})
          this.detail.typeId = deviceCategory
          this.$set(this.form,'typeId', deviceCategory.value)
          this.$set(this.form,'label', data.label)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 关闭窗口
     */
    close() {
      this.$emit('close')
      this.form = {
        month:3,
        packageType:'1'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tag{
  margin-right: 15px;
  width: 90px;
  text-align: center;
  cursor: pointer;

}

.tag-select{
  background-color: #409eff!important;
  border-color: #409eff!important;
  color: #fff!important;
}

.cover-content-item{
  width: 220px;
  float: left;
  position: relative;
  .cover-img {
    width: 200px;
    height: 100px;
  }
  .cover-mark {
    position: absolute;
    top: 0px;
    right: 28px;
    z-index: 1;
    color: red;
    cursor: pointer;
    visibility: hidden;
  }
  .select {
      visibility: visible!important;
  }
}

.dialog-footer{
  text-align: center;
}

</style>

<style lang="scss">
.ygp-form-items {
   .el-form-item{
     padding: 0 5px;
   }
  .el-form-item__label {
    line-height: 1.2;
    padding-bottom: 8px;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
  }

  .el-form-item__error {
    position: relative;
    top: auto;
    left: auto;
  }

  .el-form-item.is-desc_text {
    .el-form-item__label {
      display: none;
    }
  }
}
</style>
