<template>
  <!-- 车辆保养弹窗 -->
  <el-dialog title="保养" :visible.sync="upkeepDialogVisible">
    <el-form :model="upkeepForm" :rules="rules" ref="form" label-width="90px">
      <el-form-item label="车牌号">
        <el-input v-model="upkeepForm.numberPlate" disabled></el-input>
      </el-form-item>
      <el-form-item label="保养人" prop="operator">
        <el-input v-model="upkeepForm.operator" placeholder="请输入车辆保养人"></el-input>
      </el-form-item>
      <el-form-item label="公里数" prop="mileage">
        <el-input v-model="upkeepForm.mileage" placeholder="请输入保养时公里数"></el-input>
      </el-form-item>
      <el-form-item label="总费用" prop="amount">
        <el-input v-model="upkeepForm.amount" placeholder="请输入保养总费用"></el-input>
      </el-form-item>
      <el-form-item label="审批人" prop="approvers">
        <el-input v-model="upkeepForm.approvers" placeholder="请输入保养审批人"></el-input>
      </el-form-item>
      <el-form-item label="分公司" prop="branchCompanyId">
        <el-autocomplete
          class="inline-input"
          v-model="upkeepForm.state1"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
        <!--<el-select class="filter-item" v-model="upkeepForm.branchCompanyId" placeholder="请选择分公司">-->
        <!--<el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
        <!--</el-select>-->
      </el-form-item>
      <el-form-item label="保养项目" prop="upkeepItems">
        <el-checkbox-group v-model="upkeepForm.upkeepItems">
          <el-checkbox v-for="item in allUpkeepItems" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelUpkeep">取 消</el-button>
      <el-button type="primary" @click="upkeepVehicleHandler">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    page,
    addObj,
    getObj,
    dealObj
  } from 'api/vehicle/vehicleWarningMsg/';
  import {
    getAllUpkeepItem
  } from 'api/vehicle/upkeep';

  import rsCode from '../../utils/rsCode';

  import {mapGetters} from 'vuex';
  import {
    getAllCompany,
    getAll
  } from 'api/base_info/branch_company/';
  import {
    upkeepEndVehicle,
    upkeepVehicle
  } from 'api/vehicle/active';
  export default {
    props: ["upkeepRow"],
    name: 'upkeepDialog',
    components: {},
    data() {
      return {
        upkeepForm: {
          vehicleId: null,
          state1: "",
          numberPlate: null,
          operator: null,
          date: null,
          mileage: null,
          amount: null,
          approvers: null,
          branchCompanyId: null,
          upkeepItems: []
        },
        rules: {
          name: [
            {
              type: 'string',
              required: true,
              message: '请输入消息内容',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 2000,
              message: '长度小于 2000 个字符',
              trigger: 'blur'
            }
          ],
          remark: [
            {
              min: 0,
              max: 2000,
              message: '长度小于 2000 个字符',
              trigger: 'blur'
            }
          ]
        },
        allCompanies: {},
        allCompaniesArr: [],
        upkeepDialogVisible: false,
        allUpkeepItems: null,
        dialogStatus: undefined,
      }
    },
    created() {

    },
    watch: {
      upkeepDialogVisible(newValue, oldValue){
        if(!newValue){
          this.cleanUpkeepForm();
          this.$emit("upkeepDialogEvent", false);
        }
      },
    },
    mounted() {
      let row = this.upkeepRow;
      this.cleanUpkeepForm();
      this.upkeepForm.branchCompanyId = row.subordinateBranch;
      let that = this;
      let selectArry = [];
      getAll()
        .then(response => {
          this.allCompaniesArr = response.data;
          response.data.map(function(item){
            item.value = item.name;
            selectArry.push(item);
          });
          selectArry.map(function (iitem) {
            if( row.subordinateBranch == iitem.id){
              that.upkeepForm.state1 = iitem.name;
            }
          });
        });
      getAllCompany(codeAndBranchCompany => {
        this.allCompanies = codeAndBranchCompany;
      });
      getAllUpkeepItem().then(response => {
        this.allUpkeepItems = response.data;
      });

      this.upkeepForm.mileage = row.mileageLastUpdate?row.mileageLastUpdate: row.mileage;
      this.upkeepForm.vehicleId = row.vehicleId ? row.vehicleId: row.id;
      this.upkeepForm.numberPlate = row.numberPlate;
      this.upkeepDialogVisible = true;
    },
    computed: {
      ...mapGetters([
        'elements',
        'vehicleWarningMsgType'
      ])
    },
    methods: {
      querySearch(queryString, cb) {
        let selectArry = [];
        this.allCompaniesArr.map(function(item){
          item.value = item.name;
          selectArry.push(item);
        });
        this.selectArry = selectArry;
        var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      handleSelect(item) {
        this.upkeepForm.branchCompanyId = item.id;
        console.log(item);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
        };
      },
      getTypeName: function(type) {
        if (this.$utils.isEmpty(this.vehicleWarningMsgType[type])) {
          return '未知';
        }
        return this.vehicleWarningMsgType[type].val;
      },
      /**
       * 保养-确定
       * */
      upkeepVehicleHandler() {
        upkeepVehicle(this.upkeepForm).then(response => {
          if (response.code === rsCode.RS_CODE_SUC) {
            this.upkeepDialogVisible = false;
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            });
            this.cleanUpkeepForm();
            this.$emit("upkeepDialogEvent", true);
//            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        })
      },
      /**
       * 保养-弹框-取消
       * */
      cancelUpkeep() {
        this.cleanUpkeepForm();
        this.$emit("upkeepDialogEvent", false);
      },
      /**
       * 清空保养弹框数据
       */
      cleanUpkeepForm() {
        this.upkeepForm = {
          state1: "",
          vehicleId: null,
          numberPlate: null,
          operator: null,
          date: null,
          mileage: null,
          amount: null,
          approvers: null,
          branchCompanyId: null,
          upkeepItems: []
        }
      }
    }
  }
</script>
