<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="driverDialogFlag"
    title="选择司机"
    append-to-body
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel"
  >
    <page-search-table @search="reload"></page-search-table>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="420px"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      :toolbar="false"
      cache-key="eomContactPageTable"
      @cell-click="cellClick"
    >
      <!-- 操作 -->
      <template v-slot:action="{row}">
        <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
      </template>
      <template v-slot:drivingLicenseType="{row}">
        {{ getDict('驾照类型', row.drivingLicenseType) }}
      </template>
    </ele-pro-table>
    <div class="ele-dialog-footer" slot="footer">
      <el-button @click="selected" type="primary">选择</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </ele-modal>
</template>


<script>
import pageSearchTable from "@/views/transportManager/driverBook/indexSearchTable.vue";
import {driverBookPageListAPI} from "@/api/transportManager/driverBook";
import {mapGetters} from "vuex";

export default {
  name: "driverDialog",
  components: {pageSearchTable},
  props: {
    driverDialogFlag:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return{
      radio:'',
      current:'',
    }
  },
  computed: {
    ...mapGetters(['dict','getDictValue']),
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'driverName',
          label: '姓名',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120,
          slot: 'driverName'
        },
        {
          prop: 'sex',
          label: '性别',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
          formatter: (_row, _column, cellValue) => {
            return cellValue == 1 ? '男' : cellValue == 2 ? '女' : '';
          }
        },
        {
          prop: 'age',
          label: '年龄',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'phone',
          label: '手机号',
          align: 'center',
          slot: 'phone',
          showOverflowTooltip: true,
          minWidth: 120,
        },
        {
          prop: 'personId',
          label: '身份证号',
          align: 'center',
          slot: 'personId',
          showOverflowTooltip: true,
          minWidth: 120,
        },
        {
          prop: 'driverAge',
          label: '驾龄',
          align: 'center',
          slot: 'driverAge',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'drivingLicenseType',
          label: '驾驶证类型',
          align: 'center',
          slot: 'drivingLicenseType',
          showOverflowTooltip: true,

          minWidth: 100,
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 80,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'left'
        }
      ]
    },
    getDict() {
      return (dictName, val) => {
        return this.getDictValue(dictName, val)
      }
    }
  },
  methods: {
    /* 表格数据源 */
    datasource({page, limit, where, order}) {
      return driverBookPageListAPI({
        pageNum: page,
        size: limit,
        ...where
      });
    },

    /* 刷新表格 */
    reload(where) {
      this.$nextTick(() => {
        this.$refs.table.reload({page: 1, where});
      })
    },
    // 单击获取id
    cellClick(row) {
      this.current = row;
      this.radio = row.id;
    },
    selected() {
      if (!this.current) {
        return this.$message.warning('请至少选择一条数据');
      }
      this.$emit('changeParent', this.current, this.currentIndex);
      this.cancel();
    },
    cancel() {
      this.$emit('update:driverDialogFlag', false)
    }
  }
}
</script>



<style scoped lang="scss">

</style>
