<template>
  <el-main class="right-main">
    <div class="jd-title">
      <div>{{ jobData.岗位名称 }}</div>
    </div>

    <div class="jd-block1">
      <div class="jd-h1">一、基本信息</div>
      <table class="jd-table">
        <tr>
          <th>岗位名称</th>
          <td>
            <!-- <span>{{ jobData.基本信息.岗位名称 }}</span> -->
            <!-- itemName:对应domain -->
            <edit-text
              :val="jobData.基本信息.岗位名称"
              :bigDomain="'基本信息'"
              :itemName="'岗位名称'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
          <th>所属部门</th>
          <td>
            <!-- <span>{{ jobData.基本信息.所属部门 }}</span> -->
            <edit-text
              :val="jobData.基本信息.所属部门"
              :bigDomain="'基本信息'"
              :itemName="'所属部门'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
        </tr>
        <tr>
          <th>岗位类别</th>
          <td>
            <!-- <span>{{ jobData.基本信息.岗位类别 }}</span> -->
            <edit-text
              :val="jobData.基本信息.岗位类别"
              :bigDomain="'基本信息'"
              :itemName="'岗位类别'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
          <th>岗位级别</th>
          <td>
            <!-- <span>{{ jobData.基本信息.岗位级别 }}</span> -->
            <edit-text
              :val="jobData.基本信息.岗位级别"
              :bigDomain="'基本信息'"
              :itemName="'岗位级别'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
        </tr>
        <tr>
          <th>定编人数</th>
          <td>
            <!-- <span>{{ jobData.基本信息.定编人数 }}</span> -->
            <edit-text
              :val="jobData.基本信息.定编人数"
              :bigDomain="'基本信息'"
              :itemName="'定编人数'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
          <th>辖员人数</th>
          <td>
            <!-- <span>{{ jobData.基本信息.辖员人数 }}</span> -->
            <edit-text
              :val="jobData.基本信息.辖员人数"
              :bigDomain="'基本信息'"
              :itemName="'辖员人数'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
        </tr>
        <tr>
          <th>直接上级</th>
          <td>
            <!-- <span>{{ jobData.基本信息.直接上级 }}</span> -->
            <edit-text
              :val="jobData.基本信息.直接上级"
              :bigDomain="'基本信息'"
              :itemName="'直接上级'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
          <th>直接下级</th>
          <td>
            <!-- <span>{{ jobData.基本信息.直接下级 }}</span> -->
            <edit-text
              :val="jobData.基本信息.直接下级"
              :bigDomain="'基本信息'"
              :itemName="'直接下级'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
        </tr>
        <tr>
          <th>岗位使命</th>
          <td colspan="3">
            <!-- <span>{{ jobData.基本信息.岗位使命 }}</span> -->
            <edit-text
              :val="jobData.基本信息.岗位使命"
              :bigDomain="'基本信息'"
              :itemName="'岗位使命'"
              @changeDomainVal="changeOverviewVal"
            ></edit-text>
          </td>
        </tr>
      </table>
    </div>
    <div class="jd-block1">
      <div class="jd-h1">二、岗位职责</div>
      <div class="jd-block2">
        <div class="jd-h2">工作职责</div>
        <!-- <edit-div class="jd-text" v-model="jobData.工作内容.工作概况">
        </edit-div> -->
        <!-- <div class="jd-text">{{ jobData.工作内容.工作概况 }}</div> -->
        <div
          class="jd-block3"
          v-for="(info, title) in jobResponsibility"
          :key="title"
        >
          <div class="jd-h3">{{ title }}</div>
          <!-- <ol class="jd-li">
            <li v-for="(item, index) in info" :key="index">{{ item }}</li>
          </ol> -->
          <edit-list
            :data="info"
            class="jd-li"
          ></edit-list>
        </div>
      </div>
      </div>
      <!--职权范围---->
      <div class="jd-block2">
        <div class="jd-h2">职权范围</div>
        <table class="jd-table jd-table2">
          <tr>
            <th>所受监督</th>
            <td>
              <edit-div v-model="jobData.岗位职责.职权范围.所受监督[0]"></edit-div>
              <!-- <div>{{ jobData.岗位职责.职权范围.所受监督[0] }}</div> -->
            </td>
          </tr>
          <tr>
            <th>所施监督</th>
            <td>
              <edit-div v-model="jobData.岗位职责.职权范围.所施监督[0]"></edit-div>
              <!-- <div>{{ jobData.岗位职责.职权范围.所施监督[0] }}</div> -->
            </td>
          </tr>
          <tr>
            <th>工作权限</th>
            <td>
            <!-- <tr v-for="item in jobData.岗位职责.职权范围.工作权限"
            style="border:1px solid #ebebeb;border-left:none">
              <div>{{ item }}</div></tr> -->
              <edit-list
                :data="jobData.岗位职责.职权范围.工作权限"
                class="jd-li2"
              ></edit-list>
            </td>
          </tr>
          <tr>
            <th>企业内部沟通</th>
            <td>
            <!-- <tr v-for="item in jobData.岗位职责.职权范围.企业内部沟通"
            style="border:1px solid #ebebeb;border-left:none">
            <div>{{ item }}</div></tr> -->
            <edit-list
                :data="jobData.岗位职责.职权范围.企业内部沟通"
                class="jd-li2"
              ></edit-list>
          </td>
          </tr>
          <tr>
            <th>企业外部沟通</th>
            <td>
            <!-- <tr v-for="item in jobData.岗位职责.职权范围.企业外部沟通"
            style="border:1px solid #ebebeb;border-left:none">
            <div>{{ item }}</div></tr> -->
            <edit-list
                :data="jobData.岗位职责.职权范围.企业外部沟通"
                class="jd-li2"
              ></edit-list>
          </td>
          </tr>
          <!-- <tr>
            <th rowspan="2" class="vertical-one">沟通关系</th>
            <th class="vertical-two">企业内部</th>
            <td>
              <ul class="jd-li2">
                <li v-for="item in jobData.工作内容.职权范围.沟通关系企业内部">
                  {{ item }}
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <th class="vertical-two">企业外部</th>
            <td>
              <ul class="jd-li2">
                <li v-for="item in jobData.工作内容.职权范围.沟通关系企业外部">
                  {{ item }}
                </li>
              </ul>
            </td>
          </tr> -->
        </table>
      </div>
      <div class="jd-block2">
        <div class="jd-h2">工作环境与条件</div>
        <table class="jd-table">
          <tr>
            <th>工作时间</th>
            <td>
              <!-- <span>{{ jobData.岗位职责.工作环境与条件.工作时间[0] }}</span> -->
              <el-radio-group
                v-model="jobData.岗位职责.工作环境与条件.工作时间[0]"
                @change="changeCheckGroup"
              >
                <el-radio :label="'办公班，实际工作时间8小时'"
                  >办公班，实际工作时间8小时</el-radio
                >
                <el-radio :label="'综合计算工时工作制'"
                  >综合计算工时工作制</el-radio
                >
                <el-radio :label="'不定时工作制'">不定时工作制</el-radio>
              </el-radio-group>
            </td>
            <th>出差频度</th>
            <td>
              <!-- <span>{{ jobData.岗位职责.工作环境与条件.出差频度[0] }}</span> -->
              <el-radio-group
                v-model="jobData.岗位职责.工作环境与条件.出差频度[0]"
                @change="changeCheckGroup"
              >
                <el-radio :label="'驻外工作'">驻外工作</el-radio>
                <el-radio :label="'经常出差'">经常出差</el-radio>
                <el-radio :label="'有时出差'">有时出差</el-radio>
                <el-radio :label="'极少或不出差'">极少或不出差</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <th>脑力工作强度</th>
            <td>
              <!-- <span>{{ jobData.岗位职责.工作环境与条件.脑力工作强度[0] }}</span> -->
              <el-radio-group
                v-model="jobData.岗位职责.工作环境与条件.脑力工作强度[0]"
                @change="changeCheckGroup"
              >
                <el-radio :label="'高'">高</el-radio>
                <el-radio :label="'中'">中</el-radio>
                <el-radio :label="'低'">低</el-radio>
              </el-radio-group>
            </td>
            <th>体力工作强度</th>
            <td>
              <!-- <span>{{ jobData.岗位职责.工作环境与条件.体力工作强度[0] }}</span> -->
              <el-radio-group
                v-model="jobData.岗位职责.工作环境与条件.体力工作强度[0]"
                @change="changeCheckGroup"
              >
                <el-radio :label="'高'">高</el-radio>
                <el-radio :label="'中'">中</el-radio>
                <el-radio :label="'低'">低</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <th>主要工作场所</th>
            <td>
              <!-- <span>{{ jobData.岗位职责.工作环境与条件.主要工作场所[0] }}</span> -->
              <el-radio-group
                v-model="jobData.岗位职责.工作环境与条件.主要工作场所[0]"
                @change="changeCheckGroup"
              >
                <el-radio :label="'室内'">室内</el-radio>
                <el-radio :label="'室外'">室外</el-radio>
              </el-radio-group>

            </td>
            <th>工作环境的舒适性</th>
            <td>
              <!-- <span>{{jobData.岗位职责.工作环境与条件.工作环境的舒适性[0]}}</span> -->
              <el-radio-group
                v-model="jobData.岗位职责.工作环境与条件.工作环境的舒适性[0]"
                @change="changeCheckGroup"
              >
                <el-radio :label="'舒适'">舒适</el-radio>
                <el-radio :label="'一般'">一般</el-radio>
                <el-radio :label="'较差'">较差</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <th>工作环境的特殊性</th>
            <td colspan="3">
              <!-- <span>{{ workEnvSpecialty }}</span> -->
              <el-checkbox-group
                v-model="jobData.岗位职责.工作环境与条件.工作环境的特殊性"
                @change="changeCheckGroup"
              >
                <el-checkbox label="无"></el-checkbox>
                <el-checkbox label="粉尘\有毒有害气体"></el-checkbox>
                <el-checkbox label="噪音"></el-checkbox>
                <el-checkbox label="高温\高压"></el-checkbox>
              </el-checkbox-group>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="jd-block1">
      <div class="jd-h1">三、任职资格</div>
      <table class="jd-table jd-table2">
        <tr>
          <th>学历与专业</th>
          <td>
          <tr>
            <th>学历</th>
            <!-- <td><div>{{ jobData.任职资格.学历[0] }}</div></td> -->
            <edit-div v-model="jobData.任职资格.学历[0]"></edit-div>
          </tr>
          <tr>
            <th>专业</th>
            <!-- <td><div>{{ jobData.任职资格.专业[0] }}</div></td> -->
            <edit-div v-model="jobData.任职资格.专业[0]"></edit-div>

          </tr>
          <tr>
            <th>职业资格</th>
            <!-- <td><div>{{ jobData.任职资格.职业资格[0] }}</div></td> -->
            <edit-div v-model="jobData.任职资格.职业资格[0]"></edit-div>

          </tr>
          </td>
        </tr>
        <tr>
          <th>所需知识</th>
          <td>
            <!-- <tr v-for="item in jobData.任职资格.所需知识"
            style="border:1px solid #ebebeb;border-left:none;border-right:none"><div>{{ item }}</div></tr> -->
            <edit-list
              :data="jobData.任职资格.所需知识"
              class="jd-li2"
            ></edit-list>
          </td>
        </tr>
        <tr>
          <th>所需技能或能力</th>
          <td>
            <!-- <tr v-for="item in jobData.任职资格.所需技能或能力"
            style="border:1px solid #ebebeb;border-left:none;border-right:none"><div>{{ item }}</div></tr> -->
            <edit-list
              :data="jobData.任职资格.所需技能或能力"
              class="jd-li2"
            ></edit-list>
          </td>
        </tr>
        <tr>
          <th>所需经历经验</th>
          <td>
            <!-- <div>{{ jobData.任职资格.所需经历或经验[0] }}</div> -->
            <edit-div v-model="jobData.任职资格.所需经历或经验[0]"></edit-div>
          </td>
        </tr>
        <tr>
          <th>所需体能</th>
          <td>
            <!-- <div>{{ jobData.任职资格.所需体能[0] }}</div> -->
            <edit-div v-model="jobData.任职资格.所需体能[0]"></edit-div>

          </td>
        </tr>
        <tr>
          <th>所需职业风格</th>
          <td>
            <!-- <div>{{ jobData.任职资格.所需职业风格[0] }}</div> -->
            <edit-div v-model="jobData.任职资格.所需职业风格[0]"></edit-div>

          </td>
        </tr>
      </table>
    </div>
  </el-main>
</template>

<script>
import "@/assets/css/mydoc.css";

import EditText from "@/components/EditText/EditText.vue";
import EditDiv from "@/components/EditDiv/index.vue";
import EditList from "@/components/EditList/index.vue";

export default {
  name: "JobShow",
  props: ["data", "comTitleEdit"],
  data() {
    return {
      jobData: this.data,
      titleEdit: this.comTitleEdit,
    };
  },
  computed: {
    workEnvSpecialty() {
      let res = "";
      for (
        let i = 0;
        i < this.jobData.岗位职责.工作环境与条件.工作环境的特殊性.length;
        i++
      ) {
        if (i != 0) res += " | ";
        res += this.jobData.岗位职责.工作环境与条件.工作环境的特殊性[i];
      }
      return res;
    },
    jobResponsibility() {
      let jobres = this.jobData.岗位职责.工作职责;
      let keyArr = Object.keys(jobres);
      keyArr.splice(keyArr.indexOf("临时代理工作"), 1);
      keyArr.splice(keyArr.indexOf("工作职责"), 1);
      keyArr.splice(0, 0, "工作职责");
      keyArr.splice(keyArr.length, 0, "临时代理工作");
      let newjobres = {};
      for (let i = 0; i < keyArr.length; i++) {
        newjobres[keyArr[i]] = jobres[keyArr[i]];
      }
      return newjobres;
    },
  },
  methods: {
    changeOverviewVal(bigDomain,domain, newVal) {
      // let bigDomain = "岗位概况";
      this.jobData[bigDomain][domain] = newVal;
    },
    changeCheckGroup(newVal) {
      //   console.log(newVal);
      //   console.log(this.jobData.工作内容.工作环境与条件);
    },
    getVal() {
      return this.jobData;
    },
  },
  components: {
    EditText,
    EditDiv,
    EditList,
  },
};
</script>

<style scoped>
ul {
  list-style-type: circle;
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>

