<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="deptId">
        <a-tree-select
          v-model="model.deptId"
          :show-search="true"
          allow-clear
          tree-default-expand-all
          style="width: 100%"
          :tree-data="treeData"
          tree-node-filter-prop="label"
          :replace-fields="{children:'children', title:'label', key:'id', value: 'id' }"
          @change="deptChange"
        />
      </a-form-model-item>
      <a-form-model-item label="线别" prop="lineId">
        <j-list-select-tag
          v-if="lineShow"
          v-model="model.lineId"
          :dept-id="model.deptId"
          dict-code="line"
          @selectChange="lineChange"
        />
      </a-form-model-item>
      <a-form-model-item label="站场区间" prop="stationId">
        <j-list-select-tag
          v-if="stationShow"
          v-model="model.stationId"
          :line-id="model.lineId"
          dict-code="station"
        />
      </a-form-model-item>
      <a-form-model-item label="行别" prop="xingbie">
        <j-dict-select-tag
          v-model="model.xingbie"
          type="radioButton"
          dict-code="xingbie"
        />
      </a-form-model-item>
      <a-form-model-item label="分相名称" prop="fxmc">
        <a-input v-model="model.fxmc" />
      </a-form-model-item>
      <a-form-model-item label="支柱号范围" prop="pillarArea">
        <a-input v-model="model.pillarArea" />
      </a-form-model-item>
      <a-form-model-item label="磁枕里程" prop="czlc">
        <a-input v-model="model.czlc" />
      </a-form-model-item>
      <a-form-model-item label="设备组号" prop="team">
        <a-input v-model="model.team" />
<!--        <a-select v-model="model.team">-->
<!--          <a-select-option v-for="(item, key) in listTeamData" :key="key" :value="item">-->
<!--            {{ item }}-->
<!--          </a-select-option>-->
<!--        </a-select>-->
      </a-form-model-item>
      <a-form-model-item label="设备编号" prop="sbbh">
        <a-radio-group v-model="model.sbbh" button-style="solid">
          <a-radio-button v-for="(item, key) in Blist" :key="key" :value="item">{{ item }}</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>
<script>
import { getAction, httpAction } from '@/api/request'
import JModal from '@/components/JModal'
export default {
  name: 'CheckAndEditModel',
  components: {
    JModal
  },
  data() {
    return {
      stationShow: false,
      lineShow: false,
      treeData: [],
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
      dataSource: [],
      listTeamData: [],
      Blist: ['G1', 'G2', 'G3', 'G4'],
      title: '',
      visible: false,
      isCheck: false,
      model: {},
      validatorRules: {
        deptId: [{ required: true, message: '请选择' }],
        lineId: [{ required: true, message: '请选择' }],
        stationId: [{ required: true, message: '请选择' }],
        xingbie: [{ required: true, message: '请选择' }],
        pillarArea: [{ required: true, message: '请输入' }],
        fxmc: [{ required: true, message: '请输入' }],
        team: [{ required: true, message: '请输入' }],
        sbbh: [{ required: true, message: '请输入' }],
        czlc: [{ required: true, message: '请输入' }]
      },
      url: {
        add: '//business/catenary/bus/dmcgyq/add',
        edit: '/business/catenary/bus/dmcgyq/update',
        tree: '/system/dept/treeSelect',
        listTeam: '/business/catenary/bus/dmcgyq/listTeam'
      }
    }
  },
  watch: {
    'model.deptId': {
      immediate: true,
      handler: function(newV, oldV) {
        this.lineShow = false
        this.$nextTick(() => {
          this.lineShow = true
        })
      }
    },
    'model.lineId': {
      immediate: true,
      handler: function(newV, oldV) {
        this.stationShow = false
        this.$nextTick(() => {
          this.stationShow = true
        })
      }
    }
  },
  created() {
    this.loadTree()
    this.listTeam()
  },
  methods: {
    lineChange() {
      this.model.stationId = undefined
    },
    deptChange() {
      this.model.lineId = undefined
      this.model.stationId = undefined
    },
    listTeam() {
      this.listTeamData = []
      getAction(this.url.listTeam).then((res) => {
        if (res.code === 200) {
          this.listTeamData = res.data
        }
      })
    },
    loadTree() {
      this.treeData = []
      getAction(this.url.tree).then((res) => {
        if (res.code === 200) {
          this.treeData = res.data
        }
      })
    },
    add() {
      this.model = { lineId: null, stationId: null }
      this.visible = true
    },
    edit(record) {
      this.model = Object.assign({}, record)
      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'
      }
      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)
        }
      })
    }
  }
}
</script>
