<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form class="el-form-class" ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-form-item label="图例名称" prop="legendName">
          <el-input v-model="editForm.legendName"></el-input>
        </el-form-item>
        <el-form-item label="图例别名" prop="legendAliasName">
          <el-input v-model="editForm.legendAliasName"></el-input>
        </el-form-item>
        <el-form-item label="图例图片名称" prop="legendImg">
          <el-input v-model="editForm.legendImg"></el-input>
        </el-form-item>
        <el-form-item label="图例代码" prop="legendCode">
          <el-input v-model="editForm.legendCode"></el-input>
        </el-form-item>
        <el-form-item label="所属地区" prop="citycode">
          <City @changeFun="qvChange" :valueqv="qvvalue" :param="dialogVisible" />
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
          <el-input v-model="editForm.deptId"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="editForm.sort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
        <el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
      </span>
    </el-dialog >
  </div>
</template>
<style lang="scss">
	.el-form-class .el-form-item .el-form-item__label{
		width: 110px !important;
	}
	.el-form-class .el-form-item__content {
		margin-left: 110px !important;
	}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import City from "@/components/city.vue";
@Component({
  components: { City }
})
export default class SignsMgEdit extends Vue {
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;

  @Prop(Object) editForm!: {
    legendName: String;
    legendImg: String;
    legendCode: String;
    deptId: String;
    sort: String;
    provinceId: String;
    cityId: String;
    countyId: String;
    citycode: String;
    legendAliasName: String;
    parentId: String;
    level: String;
  };
  @Prop(String) title!: String;

  @Provide() qvvalue: any = []; //区域值

  @Provide() typeArr: any = [];

  @Provide() rules: any = {
    legendName: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    legendImg: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    legendCode: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    deptId: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    // citycode: [
    //   { required: true, trigger: "blur", message: "该项为必填项！" }
    // ],
    sort: [{ required: true, trigger: "blur", message: "该项为必填项！" }]
  };

  @Provide() cload: Boolean = false;
  @Provide() zjkey: any = 0;

  // @Watch("editForm") formChange(row: any) {
  //   let varr = [];
  //   if (this.title == "编辑" && row.provinceId && row.cityId && row.countyId) {
  //     varr.push(row.provinceId);
  //     varr.push(row.cityId);
  //     varr.push(row.countyId);
  //     this.qvvalue = varr;
  //   }else{
  //     this.qvvalue = [];
  //   }
  // }

  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: any) {
    let that = this;
    //(that.$refs[formName] as any).validate()
    if (that.editForm.parentId &&that.editForm.parentId!='0') {
      that.editForm.level = "2";
    } else {
      that.editForm.level = "1";
    }
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        (that as any).$axios
          .post(`/legendInfo/addOrEditLegendInfo`, that.editForm)
          .then((res: any) => {
            if( res ){
              (that as any).$emit("dialogFun");
              (that as any).$message({
                message: "操作成功！",
                type: "success"
              });
              that.$emit("refreshTableData"); //刷新表格
            }
          });
      } else {
        return false;
      }
    });
  }
  qvChange(v: any) {
    switch (v.length) {
      case 1:
        this.editForm.provinceId = v[0];
        break;
      case 2:
        this.editForm.provinceId = v[0];
        this.editForm.cityId = v[1];
        break;
      case 3:
        this.editForm.provinceId = v[0];
        this.editForm.cityId = v[1];
        this.editForm.countyId = v[2];
        break;
    }
    this.editForm.citycode = v[0];
    console.log(this.editForm.citycode);
  }
  mounted() {
    console.log(this.editForm);
  }
  //获取类型
  getTypeData() {
    let that = this,
      id = "2a124947ed094c3abaa85ba56f5d435e";
    (that as any).$axios
      .get(`/legendInfo/getChildLegendInfoByParentId/${id}`)
      .then((res: any) => {
        that.typeArr = res;
      });
  }
  created() {
    this.getTypeData();
    this.zjkey++;
    let varr = [],
      row = this.editForm;
    if (this.title == "编辑" && row.provinceId && row.cityId && row.countyId) {
      varr.push(row.provinceId);
      varr.push(row.cityId);
      varr.push(row.countyId);
      this.qvvalue = varr;
    } else {
      this.qvvalue = [];
    }
  }
}
</script>
