<!--
@name: 车型管理
@author: 张泽贤
@time: 2022-03-14
-->
<template>
  <div class="pages">
      <p-card v-show="!editType" :alt="$route.meta.title" class="full-card-panel full-body-flex">
        <p-form-model slot="title" ref="formTarget" layout="inline" :model="form" class="plg-grid-from">
          <p-form-model-item label="车型编码">
            <p-input v-model="form.vehicleTypeCode" placeholder="请输入车型编码" />
          </p-form-model-item>
          <p-form-model-item label="车型名称">
            <p-input v-model="form.vehicleTypeName" placeholder="请输入车型名称" />
          </p-form-model-item>
          <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
            <a-space>
              <p-button type="primary" @clickSync="onSearch" icon="search">查询</p-button>
              <p-button @click="onReset">重置</p-button>
              <!-- <p-button type="primary" @click="onSeniorSearch">高级查询</p-button> -->
            </a-space>
          </p-form-model-item>
        </p-form-model>
        <a-space slot="extra">
          <p-button type="primary" @click="toEdit('add')" icon="plus">新增</p-button>
          <import-Button :importUrl="importUrl" :tmpUrl="mainDownUrl" fileName="车型管理模板" />
          <p-button type="primary" @click="onStatus(1)" :disabled="!selectedRowKeys.length">启用</p-button>
          <p-button type="danger" @click="onStatus(0)" :disabled="!selectedRowKeys.length">停用</p-button>
          <p-button type="danger" @click="onDel" :disabled="!selectedRowKeys.length">删除</p-button>
        </a-space>
        <t-table
          ref="masterTable"
          dragle
          bordered
          :extendedObjectCode="'13'"
          row-key="id"
          :scroll="{ x: true }"
          :vScrollX="{enabled:false}"
          :vScrollY="{enabled:true,rows:10}"
           autoColWidth
          hasRowSelectCheck
          :id="$route.meta.menuId + '_vehicleManagement'"
          :data-source.sync="dataSource"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          @selectChange="(selectKey, selectData)=>{selectedRowKeys=selectKey}"
        >
          <p-table-column data-index="code" title="车型编码" :width="120" />
          <p-table-column data-index="name" title="车型名称" :width="120" />
          <p-table-column data-index="departmentName" title="部门" :width="120" />
          <p-table-column data-index="brandName" title="品牌" :width="120" />
          <p-table-column data-index="typeName" title="类别" :width="120" />
          <p-table-column data-index="length" title="长(m)" :width="120" />
          <p-table-column data-index="width" title="宽(m)" :width="120" />
          <p-table-column data-index="height" title="高(m)" :width="120" />
          <p-table-column data-index="maxMileage" title="最大行驶里程(公里)" :width="120" />
          <p-table-column data-index="weight" title="载重(kg)" :width="120" />
          <p-table-column data-index="volume" title="载方(m³)" :width="120" />
          <p-table-column data-index="statusName" title="状态" :width="120" />
          <p-table-column v-for="item in mextendedField_list" :key="item.fieldName" :data-index="item.fieldName" :title="item.displayName" :width="120" />
          <p-table-column data-index="createperson" title="创建人" :width="120" />
          <p-table-column data-index="createtime" title="创建时间" :width="120" />
          <p-table-column data-index="updateperson" title="修改人" :width="120" />
          <p-table-column data-index="updatetime" title="修改时间" :width="120" />
          <p-table-column key="action" title="操作" :width="180"  fixed="right" align="center">
            <template slot-scope="text, record">
              <a-space>
                <a @click.stop="toEdit('view', record)">查看</a>
                <a @click.stop="toEdit('edit', record)">修改</a>
                <p-switch checked-children="启用" un-checked-children="停用" @click="changeSwitch(record)" :replaceFields="{ true: 10, false: 0 }" :checked="record.status" />
                <a @click.stop="toDel(record)">删除</a>
              </a-space>
            </template>
          </p-table-column>
        </t-table>
      </p-card>

    <edit v-if="editType" :editId="editId" :type="editType" :options="options" @back="editType = ''" :mextendedField_list="mextendedField_list"></edit>
  </div>
</template>

<script>
import { WhetherToEnable, listRemoteUrl, Delete, importUrl, mainDownUrl } from './api'
import edit from './edit'
import { initDictionary, extendedFieldList } from '@/blocks/utils'
import importButton from '@/blocks/components/importButton/index.importButton.vue'
import { getOrganization } from '@/blocks/components/formConfig/departmenTree.js'

export default {
  components: { edit, importButton },
  data() {
    return {
      spinning: false,
      editType: '', // 空-列表页 add-新增 view-查看
      editId: '',
      form: {
        vehicleTypeCode: '',
        vehicleTypeName: '',
      },
      // 主表格
      dataSource: [],
      selectedRowKeys: [],
      listRemoteUrl,
      listParams: {
        vehicleTypeCode: '',
        vehicleTypeName: '',
      },
      options: {
        VEHICLE_TYPE_BRAND: [],
        MAINDATA_STATUS: [],
        VEHICLE_TYPE_CATEGORY: [],
      },

      mextendedField_list: [],
      importUrl,
      mainDownUrl,
    }
  },
  mounted() {
    getOrganization(this)
    initDictionary([{ objectcode: 'VEHICLE_TYPE_BRAND' }, { objectcode: 'MAINDATA_STATUS' }, { objectcode: 'VEHICLE_TYPE_CATEGORY' }]).then((res) => {
      for (let key in res) {
        res[key].forEach((item) => {
          if (!isNaN(item.value)) {
            item.value = +item.value
          }
        })
      }
      this.options = { ...this.options, ...res }
    })
    extendedFieldList({ extendedObjectCode: '13' }).then((res) => (this.mextendedField_list = res))
  },
  methods: {
    toEdit(type, editData = { id: '' }) {
      this.editType = type
      this.editId = editData.id
    },
    toDel(editData) {
      const vehicleTypeByIds = [{ id: editData.id }]
      this.Delete(vehicleTypeByIds)
    },
    onSearch() {
      this.selectedRowKeys = []
      this.detailDataSource = []
      this.detailSelectedRowKeys = []
      this.listParams = { ...this.form }
    },
    onSeniorSearch() {},
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSearch()
    },
    onStatus(status) {
      const vehicleTypeByIds = this.selectedRowKeys.map((item) => {
        return { vehicleTypeId: item }
      })
      if (!vehicleTypeByIds.length) {
        this.$message.error('请选择数据')
        return false
      }
      if (status === 1) {
        status = 10
      }
      this.WhetherToEnable(status, vehicleTypeByIds)
    },
    changeSwitch(record) {
      let status = +!record.status
      this.WhetherToEnable(status, [{ vehicleTypeId: record.id }])
    },
    WhetherToEnable(status, vehicleTypeByIds) {
      let self = this
      let text = status ? '是否启用?' : '停用车型，对应车辆的车型将为空，请确认是否停用车型！'
      if (status === 1) {
        status = 10
      }
      this.$confirm({
        title: text,
        onOk() {
          return new Promise((resolve, reject) => {
            WhetherToEnable({ status, vehicleTypeByIds })
              .then((res) => {
                if (res.success) {
                  self.$message.success(res.message)
                  self.onSearch()
                  resolve()
                } else {
                  self.$message.error(res.message)
                  reject()
                }
              })
              .catch(() => {
                self.$message.error(res.message)
                reject()
              })
          })
        },
      })
    },
    onDel() {
      const vehicleTypeByIds = this.selectedRowKeys.map((item) => {
        return { id: item }
      })
      if (!vehicleTypeByIds.length) {
        this.$message.error('请选择数据')
        return false
      }
      this.Delete(vehicleTypeByIds)
    },
    Delete(vehicleTypeByIds) {
      let self = this
      this.$confirm({
        title: '是否删除?',
        onOk() {
          return new Promise((resolve, reject) => {
            Delete(vehicleTypeByIds)
              .then((res) => {
                if (res.success) {
                  self.$message.success(res.message)
                  self.onSearch()
                  resolve()
                } else {
                  self.$message.error(res.message)
                  reject()
                }
              })
              .catch(() => {
                self.$message.error(res.message)
                reject()
              })
          })
        },
      })
    },
  },
}
</script>
