<template>
  <j-modal
    :title="title"
    :width="700"
    :visible="visible"
    :mask-closable="false"
    cancel-text="关闭"
    @close="close"
  >
    <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="validatorRules" :model="model">
      <a-form-model-item label="线别" prop="lineId">
        <j-list-select-tag
          v-model="model.lineId"
          placeholder="选择线别"
          dict-code="line"
          @selectChange="lineChange"
        />
      </a-form-model-item>
      <a-form-model-item label="所别" prop="substationId">
        <j-list-select-tag
          v-if="substationShow"
          v-model="model.substationId"
          :line-id="model.lineId"
          placeholder="选择所别"
          dict-code="substation"
        />
      </a-form-model-item>
      <a-form-model-item label="行别" prop="xingbie">
        <j-dict-select-tag
          v-model="model.xingbie"
          type="radioButton"
          placeholder="选择行别"
          dict-code="xingbie"
        />
      </a-form-model-item>
      <a-form-model-item label="公里标" prop="marker">
        <a-input v-model="model.marker" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="原因类型" prop="yylx">
        <j-dict-select-tag
          v-model="model.yylx"
          placeholder="选择原因类型"
          dict-code="gzyy"
        />
      </a-form-model-item>
      <a-form-model-item label="日期" prop="operationDate">
        <a-date-picker
          v-model="model.operationDate"
          style="width: 100%"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="请选择"
        />
      </a-form-model-item>
      <a-form-model-item label="图片上传" prop="imgList">
        <j-image-upload v-model="model.pics" :is-multiple="true" biz-path="scott/pic" />
      </a-form-model-item>
      <a-form-model-item label="故障描述" prop="gzms">
        <a-textarea
          v-model="model.gzms"
          placeholder="请输入"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>
<script>
import { httpAction } from '@/api/request'
import JModal from '@/components/JModal'
import JImageUpload from '@/components/JImageUpload'
import { detaileMixin } from '@/mixin/detaile'

export default {
  name: 'CheckAndEditModel',
  components: {
    JModal,
    JImageUpload
  },
  mixins: [detaileMixin],
  data() {
    return {
      substationShow: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
      dataSource: [],
      title: '',
      visible: false,
      isCheck: false,
      model: {},
      validatorRules: {
        lineId: [{ required: true, message: '请选择' }],
        substationId: [{ required: true, message: '请选择' }],
        xingbie: [{ required: true, message: '请选择' }],
        marker: [{ required: true, message: '请输入' }],
        yylx: [{ required: true, message: '请选择' }],
        operationDate: [{ required: true, message: '请选择' }],
        gzms: [{ required: true, message: '请输入' }]

      },
      url: {
        add: '/business/catenary/bus/jlgz/add',
        edit: '/business/catenary/bus/jlgz/update',
        detaile: '/business/catenary/bus/jlgz/'
      }
    }
  },
  watch: {
    'model.lineId': {
      immediate: true,
      handler: function(newV, oldV) {
        this.substationShow = false
        this.$nextTick(() => {
          this.substationShow = true
        })
      }
    }
  },
  created() {
  },
  methods: {
    lineChange() {
      this.model.substationId = undefined
    },
    add() {
      this.model = { substationId: null }
      this.visible = true
    },
    edit(record) {
      this.model = Object.assign({}, record, { substationId: record.substationId ? record.substationId : null })
      this.getDetaile(this.model.id)
      this.visible = true
    },
    close(isSubmit) {
      if (isSubmit) {
        this.checkData()
      } else {
        this.visible = false
      }
    },
    checkData() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.saveData()
        } else {
          return false
        }
      })
    },
    saveData() {
      let url, type
      if (!this.model.id) {
        url = this.url.add
        type = 'post'
      } else {
        url = this.url.edit
        type = 'put'
      }
      if (this.model.pics) {
        this.model.pics = this.setPicsArr(this.model.pics)
      } else {
        this.model.pics = null
      }
      httpAction(url, this.model, type).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.$emit('ok')
          this.visible = false
        } else {
          console.log(res)
        }
      })
    },
    setPicsArr(pics) {
      const obj = []
      const arr = pics.split(',')
      for (const item of arr) {
        obj.push({ url: item })
      }
      return obj
    },
    setPicsStr(pics) {
      const Arr = []
      for (const item of pics) {
        Arr.push(item.url)
      }
      console.log(Arr)
      return Arr.toString()
    }
  }
}
</script>
