<template>
  <div class="wrapper editwrap w100">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
        <el-row :gutter="20">
          <el-col :span="12" class="flcolum">
            <div>
              <div class="yatit">预案基本信息</div>
              <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
                <el-form-item label="所属公司:">
                  <font>{{editForm.enterpriseName}}</font>
                </el-form-item>
                <el-form-item label="预案标题:">
                  <font>{{editForm.planTitle}}</font>
                </el-form-item>
                <el-form-item label="预案分类:">
                  <font>{{editForm.planType}}</font>
                </el-form-item>
                <el-form-item label="预案等级:">
                  <font>{{editForm.planLevel + '级'}}</font>
                </el-form-item>
                <el-form-item label="预案源文件:">
                  <span
                          class="dbtn sd qiCr"
                          @click="checkFile(editForm.sourceFile)"
                          v-if="editForm.sourceFile != '' && editForm.fileOriginalName != ''"
                  >
                    <i class="el-icon el-icon-view"></i>
                    {{editForm.fileOriginalName}}
                  </span>
                </el-form-item>
                <div v-if="title != '详情'">
                  <el-form-item label="审核预案" prop="checkStatus">
                    <el-radio-group v-model="editForm.checkStatus">
                      <el-radio label="0">待审核</el-radio>
                      <el-radio label="1">通过</el-radio>
                      <el-radio label="2">未通过</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="审核意见">
                    <el-input type="textarea" v-model="editForm.remarks"></el-input>
                  </el-form-item>
                </div>
                <div v-else>
                  <el-form-item label="审核状态:">
                    <!--<font>{{editForm.checkStatus == 0 ? '已上报' : '未上报'}}</font>-->
                    <span v-if="editForm.checkStatus == 0">待审核</span>
                    <span v-if="editForm.checkStatus == 1">审核通过</span>
                    <span v-if="editForm.checkStatus == 2">审核未通过</span>
                  </el-form-item>
                  <el-form-item label="审核意见:">
                    <font>{{editForm.remarks}}</font>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12" class="flcolum">
            <div>
              <div class="yatit">预案内容</div>
              <div v-html="editForm.planContents" style="height:450px; border:solid 1px #ccc; overflow: auto"></div>
              <font v-if="editForm.planContents == ''">暂无内容~</font>
            </div>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="confirmFun('editForm')" v-if="title != '详情'">提交</el-button>
          <el-button @click="$emit('dialogFun')" size="small">取消查看</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
let uploadfile = require("@/assets/uploadfile.png");
@Component({
  components: { City },
})
export default class PlansMgEdit extends Vue {
  //上传
  @Provide() actionUrl: any = "";
  @Provide() sourceFile: any = [];
  @Provide() fileList: any = [];
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;
  @Prop(String) title!: String;
  @Prop(Object) editForm!:{
    id: String;
    enterpriseId: String;
    sourceFile: String;
    planContents: String;
    planType: String;
    planLevel: String;
    planTitle: String;
    fileOriginalName: String;
  };
  @Provide() enterpriseId: String = "";
  @Provide() qyvisble: boolean = true;

  @Provide() rules: any = {
    // checkStatus: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
  };
  @Watch("sourceFile") change(val: any) {
    if (val.length > 0) {
      this.editForm.sourceFile = val[0].response.data.viewPath;
      this.editForm.fileOriginalName = val[0].response.data.originalName;

      this.fileList = [];
      this.fileList.push({
        name: this.editForm.fileOriginalName,
        url: uploadfile,
      });
    } else {
      this.editForm.sourceFile = "";
      this.editForm.fileOriginalName = "";
    }
  }
  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this;
    that.editForm.enterpriseId = that.enterpriseId;
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        METHOD.axiosPost(
          that,
          `/planInfo/addOrEditPlanInfo`,
          that.editForm,
          function (res: any) {
            if (res.code == 0) {
              (that as any).$message({
                message: "操作成功！",
                type: "success",
              });
              (that as any).$emit("dialogFun");
              that.$emit("refreshTableData"); //刷新表格
            }
          }
        );
      } else {
        return false;
      }
    });
  }
  onError(err: any, file: any, fileList: any) {
    this.$message.error("上传失败!");
  }
  checkFile(url: any) {
    window.open(METHOD.URL + url, "_blank");
  }
  created() {
    let that = this;
  }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.w100 .el-dialog {
  width: 80%;
  .flcolum {
    > div {
      border-radius: 3px;
    }
  }
  .yatit {
    background: #4273bd;
    color: #ffffff;
    line-height: 2;
    height: 2em;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 2px;
  }
  .el-transfer-panel {
    width: calc((100% - 116px) / 2);
  }
  .el-transfer__buttons {
    width: 56px;
  }
  .el-transfer__button {
    margin-left: 0;
    display: block;
  }
}
</style>