<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-form-item label="类型" prop="dataType">
          <el-select v-model="editForm.dataType" placeholder="请选择">
            <el-option label="企业辅料" value="1"></el-option>
            <el-option label="生产设备" value="2"></el-option>
            <el-option label="企业产品" value="3"></el-option>
            <el-option label="应急物资" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="goodsName">
          <el-input v-model="editForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="编号" prop="number">
          <el-input v-model="editForm.number"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="goodsInfo">
          <el-input type="textarea" v-model="editForm.goodsInfo"></el-input>
        </el-form-item>
        <el-form-item label="物品类型" prop="category">
          <el-input v-model="editForm.category"></el-input>
        </el-form-item>
        <el-form-item label="否是重大危险源" prop="isBigDanger">
          <el-radio-group v-model="editForm.isBigDanger">
            <el-radio :label="'0'">否</el-radio>
            <el-radio :label="'1'">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="editForm.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="stockNum">
          <el-input type="number" v-model.number="editForm.stockNum"></el-input>
        </el-form-item>
        <el-form-item label="危险等级" prop="dangerGrade" v-if="editForm.isBigDanger == 0">
          <el-select v-model="editForm.dangerGrade" placeholder="请选择">
            <el-option
              v-for="item in levelArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在厂区位置" prop="factoryLocation">
          <el-input v-model="editForm.factoryLocation"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-row>
            <el-col :span="16">
              <el-input v-model="editForm.longitude"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="editForm.latitude"></el-input>
        </el-form-item>
        <el-form-item label="仓库编号" prop="warehouseNum">
          <el-input v-model="editForm.warehouseNum"></el-input>
        </el-form-item>
        <el-form-item label="入库时间" prop="addTime">
          <el-date-picker
            v-model="editForm.addTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="出库时间" prop="outTime">
          <el-date-picker
            v-model="editForm.outTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
    <Mapdialog
      v-if="loadmap"
      :dialogTableVisible="dialogTableVisible"
      @dialogcancelFun="dialogcancelFun"
      :slat="editForm.latitude"
      :slng="editForm.longitude"
      @confirm="qrFun"
    />
  </div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import Mapdialog from "@/components/maplnglat.vue";
import METHOD from "@/utils/methods";

@Component({
  components: { Mapdialog },
})
export default class EnseListEdit extends Vue {
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;
  @Prop({
    type: Array,
    default() {
      return [];
    },
  })
  public levelArr: any;
  @Prop(Object) editForm!: {
    goodsName: String;
    longitude: Number;
    latitude: Number;
    dataType: String;
    enterpriseId: String;
  };
  @Prop(String) title!: String;

  @Provide() qvvalue: any = []; //区域值
  @Provide() signsArr: any = []; //图例list
  @Provide() dialogTableVisible: Boolean = false;
  @Provide() rules: any = {
    goodsName: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    dataType: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    isBigDanger: [
      { required: true, trigger: "blur", message: "该项为必填项！" },
    ],
    dangerGrade: [
      { required: true, trigger: "blur", message: "该项为必填项！" },
    ],
    factoryLocation: [
      { required: true, trigger: "blur", message: "该项为必填项！" },
    ],
    longitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    latitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
  };
  @Provide() loadmap: Boolean = false;

  qrFun(v: any) {
    //确认选择经纬度
    this.editForm.longitude = v.lng;
    this.editForm.latitude = v.lat;
  }
  MapdialogFun() {
    this.loadmap = false;
    this.$nextTick(() => {
      this.loadmap = true;
    });
    this.dialogTableVisible = true;
  }
  dialogcancelFun() {
    this.dialogTableVisible = false;
  }
  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this,
      params = that.editForm;
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        METHOD.axiosPost(
          that,
          `/enterpriseGoods/addOrEditEnterpriseGoods`,
          params,
          function (res: any) {
            if (res.code == 0) {
              (that as any).$emit("dialogFun");
              (that as any).$message({
                message: "操作成功！",
                type: "success",
              });
              that.$emit("refreshTableData"); //刷新表格
            }
          }
        );
      } else {
        return false;
      }
    });
  }
  created() {}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
