<template lang="pug">
  <div class='m_i_dialog'>
    <el-dialog :title="title" width="400px" :close-on-click-modal='false' :visible.sync='visible' append-to-body>
      .title-bold(slot='title') {{title}}
      <el-form :model='dataForm'  ref='dataForm' :rules="rules" label-width="120px">
        <el-form-item label='巡查点名称:' prop='name'>
          <el-input v-model='dataForm.name' :readonly="readonlyName" class='mywidth'></el-input>
        </el-form-item>
        <el-form-item label='巡查点坐标X:' prop='coordinateX'>
          <el-input v-model.number='dataForm.coordinateX' :readonly="readonly" class='mywidth'></el-input>
        </el-form-item>
        <el-form-item label='巡查点坐标Y:' prop='coordinateY'>
          <el-input v-model.number='dataForm.coordinateY' :readonly="readonly" class='mywidth'></el-input>
        </el-form-item>
        <el-form-item label='巡查点位置描述:' prop='byx1'>
          <el-input style="width:202px;" type="textarea" maxlength="200" v-model='dataForm.byx1' resize="none" :readonly="readonlyByx1" class='mywidth'></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot='footer'>
        <el-button type="primary" @click='visible=false' v-if="this.title === '详情查看'">关闭</el-button>
        <el-button type="primary" @click='cancel' v-if="this.title === '编辑巡查点' || this.title === '新增巡查点'">取消</el-button>
        <el-button type="primary" @click='saveClick' v-if="this.title === '编辑巡查点' || this.title === '新增巡查点'">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('d2admin/user', ['info'])
  },
  props: ['isAdd'],
  data() {
    // let validateAcquaintance = (rule, value, callback) => {
    //   // 输入 8--，value 为 8
    //   // 估计这里内部使用了 parseInt() / parseFloat()
    //   if (value < 0 || value > 1000) {
    //     callback(new Error('坐标值超过范围'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      visible: false,
      dataForm: { name: '', coordinateX: 0, coordinateY: 0, byx1: '' },
      title: '详情查看',
      readonly: true,
      readonlyName: true,
      readonlyByx1: true,
      stationId: localStorage.getItem('stationId'),
      rules: {
        name: [
          { required: true, message: '请输入巡查点名称', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ],
        coordinateX: [
          { required: true, message: '请输入巡查点X坐标' }
          // { validator: validateAcquaintance, trigger: ['blur', 'change'] }
        ],
        coordinateY: [
          { required: true, message: '请输入巡查点X坐标' }
          // { validator: validateAcquaintance, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created() {},
  methods: {
    //type:1编辑 2查看
    init(res, type) {
      this.visible = true
      this.readonly = true
      this.dataForm = { ...res }
      this.dataForm.key = res.key
      this.dataForm.byx2 = 'xungengdian'
      this.dataForm.stationId = this.stationId
      if (type === 1) {
        this.readonlyName = false
        this.readonlyByx1 = false
        if (this.dataForm.addOrUpdate === 'save') {
          this.title = '新增巡查点'
        } else {
          this.title = '编辑巡查点'
          //  this.dataForm = { name: '', coordinateX: 0, coordinateY: 0, byx1: '' }
        }
      } else {
        this.title = '详情查看'
      }
    },
    saveClick() {
      // if (this.dataForm.name == '') {
      //   this.$message.error('请输入巡查点名称')
      //   return false
      // }
      this.$refs.dataForm.validate((valida) => {
        if (valida) {
            this.$emit('closeQ', this.dataForm, false)
            this.visible = false
            // this.$http({
            //     url: this.$http.adornUrlEq(`/epPatrolPoint/${!this.dataForm.id ? 'save' : 'update'}`),
            //     method: 'post',
            //     data: this.dataForm
            // }).then(data => {
            //     // console.log('初始化线路树：', data.nodes)
            //     if (data && data.code === 0) {
            //         this.$emit('closeQ', data.bean, false)
            //         this.visible = false
            //     }
            // })
        }
      })
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', `${this.title}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.visible = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>
<style></style>
