<template>
  <div class="app-container addPlan">
    <div>
      <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="planId">
          <el-select
            v-model="form.planId"
            placeholder="请选择施工计划"
            clearable
            size="small"
            style="width: 300rem"
            @change="planChange()"
          >
            <el-option
              v-for="obj in planList"
              :key="obj.id"
              :label="obj.name"
              :value="obj.id"
            />
          </el-select>
        </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-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="lane">
          <el-select
            multiple
            v-model="roadlan"
            placeholder="请选择方向"
            clearable
            size="small"
            style="width: 300rem"
          >
            <el-option
              v-for="i in ['1','2','3', '4']"
              :key="i"
              :label="i"
              :value="i"
            />
          </el-select>
          <!-- <el-input v-model="form.lane" placeholder="请输入占用车道" style="width:300rem"/> -->
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="现场负责人" prop="manageUser">
              <el-input
                v-model="form.manageUser"
                placeholder="请输入现场负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="现场负责人手机号" prop="managePhone">
              <el-input
                v-model="form.managePhone"
                placeholder="请输入现场负责人手机号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="现场安全员" prop="saveUser">
              <el-input
                v-model="form.saveUser"
                placeholder="请输入现场安全员"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安全员手机号" prop="savePhone">
              <el-input
                v-model="form.savePhone"
                placeholder="请输入安全员手机号"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="text-align: center">
        <el-button size="mini" @click="save(1)">保存</el-button>
        <el-button size="mini" @click="dialogVisible = true">提交</el-button>
        <el-button size="mini" @click="cancle">取消</el-button>
      </div>
    </div>

    <el-dialog
      title="选择部门"
      :visible.sync="dialogVisible"
      append-to-body
      width="20%"
      style="margin-top: 20vh"
    >
      <div>
        <el-row>
          <el-col
            :span="12"
            v-for="item in deptlist"
            style="margin-bottom: 10px"
          >
            <el-radio v-model="audioDept" :label="item.deptId">{{
              item.deptName
            }}</el-radio>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listReport,
  getReport,
  delReport,
  addReport,
  updateReport,
} from "@/api/system/report";
import {
  listPlan,
  getPlan,
  delPlan,
  addPlan,
  updatePlan,
} from "@/api/system/plan";
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
} from "@/api/system/dept";
// 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",
      // 表单参数
      form: {},
      rules: {},
      planList: [],
      status: "",
      name: "",
      dialogVisible: false,
      audioDept: "103",
      deptlist: [],
      roadlan:[],
    };
  },
  watch: {
    'roadlan': function(val) {
      this.form["lane"] = val.join(",");
    }
  },
  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;



    this.form.lane = this.$route.query.lane;
    this.roadlan = (this.form.lane ?? "").split(",")

    listDept({ parentId: 101 }).then((res) => {
      //  console.log(res)
      this.deptlist = res.data;
    });



    // console.log(this.$route.query.status);
  },
  methods: {
    planChange() {
      console.log(this.form.planId);
      for (var index in this.planList) {
        if (this.planList[index].id == this.form.planId) {
          this.form.section = this.planList[index].section;
          this.form.direction = this.planList[index].direction;
          this.form.startKm = this.planList[index].startKm;
          this.form.startHectometer = this.planList[index].startHectometer;
          this.form.endKm = this.planList[index].endKm;
          this.form.endHectometer = this.planList[index].endHectometer;
          this.form.contentOne = this.planList[index].contentOne;
          this.form.contentTwo = this.planList[index].contentTwo;

        }
      }
    },
    getList() {
      listPlan().then((response) => {
        this.planList = response.rows;
        console.log(this.planList);
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    save(status) {
      this.form.status = status;
      if (status == 2) {
        this.form.auditDept = this.audioDept;
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateReport(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$router.push({ path: "/report" });
            });
          } else {
            addReport(this.form).then((response) => {
              console.log(this.response);
              this.$modal.msgSuccess("新增成功");
              this.$router.push({ path: "/report" });
            });
          }
        }
      });
    },
    cancle() {
      this.$router.push({ path: "/report" });
    },
    submit() {
      this.dialogVisible = true;
    },
  },
};
</script>

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