<template>
  <div class="app-container addPlan" >
            <div style="font-size: 16rem;
                        font-weight: 1000;
                        text-align: left;
                        color: #333333;position: relative">
                        {{name}}
              <el-button size="small" type="primary" plain style="position: absolute;top:0;right: 10px"  @click="cancle">返回</el-button>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="200rem" style="padding-left:300rem;margin-top:50rem">
                        <el-form-item label="公路（桥梁或汽渡）名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称" style="width:300rem"/>
                        </el-form-item>
                        <el-form-item label="桥梁长度及净宽" prop="bridgeHeightWidth">
                        <el-input v-model="form.bridgeHeightWidth" placeholder="请输入桥梁长度及净宽"  style="width:300rem"/>
                        </el-form-item>
                        <el-form-item label="公路技术等级" prop="level">
                        <el-input v-model="form.level" placeholder="请输入公路等级"  style="width:300rem"/>
                        </el-form-item>
                        <el-row :gutter="20">
                                      <el-col :span="7">
                                    <el-form-item label="施工路段" prop="section">
                                      <el-select

                                        v-model="form.section"
                                        placeholder="请选择路段"
                                        clearable
                                        size="small"
                                        style="width: 300rem"
                                      >
                                        <el-option
                                          v-for="dict in dict.type.road"
                                          :key="dict.value"
                                          :label="dict.value"
                                          :value="dict.value"
                                        />
                                      </el-select>
<!--                                    <el-input v-model="form.section" placeholder="请输入施工路段"  style="width:300rem"/>-->
                                    </el-form-item>
                                      </el-col>
                                    <el-col :span="6">
                                    <el-form-item label="方向" prop="direction">
                                    <el-select v-model="form.direction" placeholder="请选择方向" clearable size="small">
                                                <el-option
                                                  v-for="dict in dict.type.sys_direction"
                                                  :key="dict.value"
                                                  :label="dict.label"
                                                  :value="dict.value"
                                                />
                                              </el-select>
                                    </el-form-item>
                                    </el-col>
                        </el-row>
                         <el-row :gutter="20">
                                        <el-col :span="7">
                                    <el-form-item label="开始公里桩" prop="startKm">
                                      <el-input v-model="form.startKm" placeholder="请输入开始公里桩"  style="width:300rem">
                                        <template slot="prepend">K</template>
                                      </el-input>
                                      </el-form-item>
                                        </el-col>
                                      <el-col :span="6">
                                    <el-form-item label="" prop="startHectometer">
                                      <el-input v-model="form.startHectometer" placeholder="请输入开始米桩"  style="width:300rem">
                                        <template slot="prepend">+</template>
                                      </el-input>
                                    </el-form-item>
                                    </el-col>
                                    </el-row>
                        <el-row :gutter="20">
                                      <el-col :span="7">
                                    <el-form-item label="结束公里桩" prop="endKm">
                                      <el-input v-model="form.endKm" placeholder="请输入结束公里桩" style="width:300rem">
                                        <template slot="prepend">K</template>
                                      </el-input>
                                    </el-form-item>
                                      </el-col>
                                    <el-col :span="6">
                                    <el-form-item label="" prop="endHectometer">
                                      <el-input v-model="form.endHectometer" placeholder="请输入结束米桩" style="width:300rem">
                                        <template slot="prepend">+</template>
                                      </el-input>
                                    </el-form-item>
                                    </el-col>
                        </el-row>

                        <el-row :gutter="20">
                                    <el-col :span="7">
                                    <el-form-item label="施工内容一" prop="contentOne">
                                    <el-select v-model="form.contentOne" placeholder="请选择方向" clearable size="small" style="width:300rem">
                                                <el-option
                                                  v-for="dict in dict.type.content_one"
                                                  :key="dict.value"
                                                  :label="dict.label"
                                                  :value="dict.value"
                                                />
                                              </el-select>
                                    </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                    <el-form-item label="施工内容二" prop="contentTwo">
                                    <el-input v-if='form.contentOne != 2' v-model="form.contentTwo" placeholder="请输入施工内容二" style="width:300rem"/>
                                     <el-select v-if='form.contentOne == 2' v-model="form.contentTwo" placeholder="请选择方向" clearable size="small" style="width:300rem">
                                                <el-option
                                                  v-for="dict in dict.type.content_two"
                                                  :key="dict.value"
                                                  :label="dict.label"
                                                  :value="dict.value"
                                                />
                                              </el-select>
                                    </el-form-item>
                                    </el-col>
                        </el-row>

                            <el-row :gutter="20">
                                    <el-col :span="7">
                                     <el-form-item label="预计开始时间" prop="startTime" >
                                            <!-- <el-date-picker clearable
                                                v-model="form.startTime"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="请选择预计开始时间">
                                            </el-date-picker> -->
                                              <el-date-picker
                                                    style="width:300rem"
                                                    v-model="form.startTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间">
                                                  </el-date-picker>
                                            </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                     <el-form-item label="预计结束时间" prop="endTime">
                                            <el-date-picker clearable
                                                style="width:300rem"
                                                v-model="form.endTime"
                                                type="datetime"
                                                placeholder="请选择预计结束时间">
                                            </el-date-picker>
                                            </el-form-item>
                                    </el-col>
                        </el-row>



                        <el-form-item label="施工单位" prop="dept">
                        <el-input v-model="form.dept" placeholder="请输入施工单位" style="width:300rem"/>
                        </el-form-item>
                        <!-- <el-form-item label="录入人" prop="creatUser">
                        <el-input v-model="form.creatUser" placeholder="请输入录入人" />
                        </el-form-item> -->
                        <el-form-item label="批准手续" prop="fileUrl">
                                      <el-upload
                                          class="upload-demo"
                                          accept=".pdf"
                                          :action="uploadUrl"
                                          :headers="uploadHeaders"
                                          :on-preview="handlePreview"
                                          :on-change="handleFileChange"
                                          :on-remove="handleFileRemove"
                                          :before-remove="beforeRemove"
                                          :show-file-list="true"
                                          :file-list="fileList"
                                        >
                                          <div style="text-align:left;">
                                          <el-button size="small" type="primary" plain>+点击上传</el-button>
                                        </div>
                                      </el-upload>
                        </el-form-item>

                    </el-form>


                    <div style="text-align:center;margin-top:100rem">
                               <el-button  size="mini" @click="submitForm">保存</el-button>
                               <el-button  size="mini" @click="cancle">取消</el-button>
                    </div>
  </div>
</template>

<script>
import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/system/plan";
import { getToken } from '@/utils/auth'
// import { AppMain } from '@/layout/components'
export default {
  name: "Index",
  dicts: ['sys_direction','content_one','content_two','road'],
  // components: {
  //   AppMain,
  // },
  data() {
    return {
      // 版本号
      version: "3.8.2",
      // uploadHeaders: {},
      // 表单参数
      form: {},
      name:'新增',
      rules: {
      },
       uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      fileList:[],
      uploadHeaders: {},
    };
  },
  created:function(){
       this.uploadHeaders = {
          Authorization: "Bearer " + getToken(),
        };
  },
  mounted:function(){
          // this.getList();
          console.log(this.$route.query);
          this.$route.query.params = null;
          this.form = this.$route.query
          this.name = this.$route.query.routerName
          // console.log(this.$route.query.status);
  },
  methods: {
     handlePreview(file) {
        console.log(file);
        window.open(process.env.VUE_APP_BASE_API+file.url);
      },
    handleFileChange(file, fileList) {
      if (file.status === "success") {
        let list = [];
        for (let key in fileList) {
          if (
            fileList[key].url ||
            (fileList[key].response && fileList[key].response.fileName)
          ) {
            list.push({
              name: fileList[key].name,
              url: fileList[key].url || fileList[key].response.fileName,
            });
          }
        }
        this.fileList = list;
      }
    },
    handleFileRemove(file, fileList) {
      if (file.status === "success") {
        let list = [];
        for (let key in fileList) {
          if (
            fileList[key].url ||
            (fileList[key].response && fileList[key].response.fileName)
          ) {
            list.push({
              name: fileList[key].name,
              url: fileList[key].url || fileList[key].response.fileName,
            });
          }
        }
        this.fileList1 = list;
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
     submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.fileUrl= JSON.stringify(this.fileList);
          if (this.form.id != null) {
            updatePlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              // this.getList();
            });
          } else {
             console.log(this.form);
            addPlan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
               this.$router.push({path: '/plan'})
              // this.getList();
            });
          }
        }
      });
    },
    cancle(){
            this.$router.push({path: '/plan'})
    },
  },
};
</script>

<style scoped lang="scss">
     .addPlan{
          background-color: #ffffff
     }

     .upload_doc {
        text-decoration: underline;
        color: #1890ff;
        position: relative;
        display: inline-block;
      }

</style>

