<template>
  <div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      "
      v-show="sopStep == 'first'"
    >
      <img
        style="width: 1250px; height: 700px"
        src="@/assets/images/marsBg.png"
        alt=""
      />
<!--      -->
      <img
        style="
          position: absolute;
          width: 35px;
          height: 35px;
          left: 620px;
          top: 310px;
        "
        src="../../../../assets/images/marsPoint.png"
        alt=""
        @click="handelChange('second')"
      />
    </div>
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
      "
      v-show="sopStep == 'second'"
    >
      <h3 style="margin-left: 20px">LD-R&R SOP</h3>
      <span style="margin-left: 20px">选择 工艺/设备</span>
      <el-table
        style="width: 50%; margin: 20px"
        :header-cell-style="{ background: '#004d8c', color: '#FFFFFF' }"
        :data="technologyList"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="设备/工艺名称"
          align="center"
          prop="machineryName"
        ></el-table-column>
        <el-table-column
          label="所属岗位"
          align="center"
          prop="workstationName"
        ></el-table-column>
        <el-table-column
          label="设备/工艺类型"
          align="center"
          prop="machineryType"
        ></el-table-column>
        <el-table-column
          label="岗位类型"
          align="center"
          prop="workstationType"
        ></el-table-column>
      </el-table>
      <h2 style="margin-left: 20px">sop类型</h2>
      <el-radio-group
        v-model="selectedOption"
        size="small"
        style="display: flex; flex-direction: column; align-items: flex-start;"
      >
        <el-radio label="开收班" border style="margin: 20px">开收班</el-radio>
        <el-radio label="清洁" border style="margin: 20px">清洁</el-radio>
        <el-radio label="换产" border style="margin:20px">换产</el-radio>
        <el-radio label="维修" border style="margin: 20px">维修</el-radio>
        <el-radio label="PM" border style="margin: 20px ">PM</el-radio>
      </el-radio-group>
      <el-button type="primary" style="margin-left: 20px" @click="handelChange('third')">开始执行</el-button>
      <el-button type="warning" style="margin-left: 140px;margin-top: -35px" @click="handelChange('first')">上一步</el-button>
    </div>
    <div style="position: relative; display: flex;" v-show="sopStep == 'third'">
      <div
        class="left"
        style="width: 35%; display: flex; flex-direction: column"
      >
        <div class="left-top">
          <el-card class="box-card" style="margin: 10px">
            <div slot="header" class="clearfix">
              <span>工艺/设备 工艺图</span>
            </div>
            <img src="@/assets/images/techonlogy.png" alt="" />
          </el-card>
        </div>
        <div class="left-bottom">
          <el-card class="box-card" style="margin: 10px">
            <div slot="header" class="clearfix">
              <span>LOTO站信息</span>
            </div>
            <img src="@/assets/images/sopPoint.png" alt="" />
          </el-card>
        </div>
      </div>
      <div class="right" style="flex: 1">
        <el-card class="box-card" style="margin: 10px; height: 742px">
          <div slot="header" class="clearfix">
            <span>八大步骤</span>
          </div>
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="width: 700px; height: 600px">
              <div style="width: 100%; height: 100px">
                <div>
                  <el-table :data="StepData" :show-header="false" style="margin-top: 100px">
                    <el-table-column label="" prop="step"></el-table-column>
                    <el-table-column label="" prop="number">
                      <template slot-scope="scope">
                        <span v-if="scope.row.number !== null">
                          <i :class="scope.row.icon">{{ scope.row.number }}</i>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="" prop="status">
                      <template slot-scope="scope">
                        <span v-if="scope.row.status !== '已执行'&&scope.row.step!=='第5步'">
                          <el-button type="primary" plain size="small"
                            >执行</el-button
                          >
                        </span>
                        <span v-if="scope.row.status !== '已执行'&&scope.row.step=='第5步'">
                          <el-button type="primary" plain size="small" @click="addInside"
                          >执行</el-button
                          >
                        </span>
                        <span v-if="scope.row.status == '已执行'">
                          <span
                            style="
                              display: inline-block;
                              width: 8px;
                              height: 8px;
                              margin: 1%;
                              border-radius: 50%;
                              background: #6aabfb;
                            "
                          ></span>
                          <span>{{ scope.row.status }}</span>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label=""
                      prop="content"
                      width="300"
                    ></el-table-column>
                  </el-table>
                  <el-button type="warning" style="margin-top: 35px" @click="handelChange('second')">上一步</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 添加或修改外部人员对话框 -->
    <el-dialog
      :visible.sync="open"
      width="450px"
      append-to-body
      style="margin-top: 13%"
    >
      <div slot="title" class="dialog-title">
        <i></i>
        <span class="title">添加人员</span>
      </div>
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="100px"
      >
        <el-form-item label="选择内部人员" prop="nickName" >
          <el-select
            v-model="dialogForm.nickName"
            placeholder="请选择人员"
            clearable
            style="width: 100%"
            multiple
          >
            <el-option
              v-for="dict in this.listLockerOption"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择外部人员" prop="nickName" >
          <el-select
            v-model="dialogForm.nickName"
            placeholder="请选择人员"
            clearable
            style="width: 100%"
            multiple
          >
            <el-option
              v-for="dict in this.listCoLockerOption"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--  内部人员确认-->
        <el-button v-no-more-click type="primary" @click="cancel" >确认</el-button>
        <el-button v-no-more-click @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { listMarsDept } from "@/api/system/marsdept";
import { listTechnology } from "@/api/system/machinery";
import Template from "@/views/print/printtemplate/list.vue";

export default {
  name: "NewSop",
  components: { Template },
  data() {
    return {
      sopStep: "first",
      selectedOption: "",
      technologyList: [],
      marsDeptList: [],
      StepData: [
        {
          step: "第1步",
          status: "已执行",
          number: null,
          content: "识别所要完成的工作内容",
        },
        {
          step: "第2步",
          status: "已执行",
          number: null,
          content: "判断工作中锁设计的能量源及隔离方式",
        },
        {
          step: "第3步",
          status: "分配",
          number: "4",
          icon: "el-icon-user",
          content: "通知所有受影响的人",
        },
        {
          step: "第4步",
          status: "已执行",
          number: null,
          content: "如果设备正在运行，按正常操作停机",
        },
        {
          step: "第5步",
          status: "执行",
          number: "0",
          icon: "el-icon-lock",
          content: "上锁并挂牌",
        },
        {
          step: "第6步",
          status: "执行",
          number: null,
          content: "能量隔离证实",
        },
        {
          step: "第7步",
          status: "执行",
          number: null,
          content: "取锁前的检查",
        },
        {
          step: "第8步",
          status: "执行",
          number: "0",
          icon: "el-icon-unlock",
          content: "拆除锁具，并把隔离开关恢复到正常位置",
        },
      ],
      listLockerOption:[
        {
          label: "张三",
          value: "1",
        },
        {
          label: "里斯",
          value: "4",
        },
      ],//上锁人数据
      listCoLockerOption:[
        {
          label: "鹿眠",
          value: "1",
        },
        {
          label: "林涧",
          value: "4",
        },
      ],//上锁人数据
      open:false,//添加人员
      dialogForm:[

      ],//人员信息
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      const data = {
        pages: 1,
        size: -1,
      };
      listTechnology(data).then((res) => {
        console.log(res, "technologyList");
        this.technologyList = res.data.records;
      });
      listMarsDept(data).then((res) => {
        console.log(res, "marsDeptList");
        this.marsDeptList = res.data.records;
      });
    },
    handelChange(val) {
      console.log(val);
      this.sopStep = val;
    },
    // 添加内部人员
    addInside() {
      console.log('添加内部人员')
      this.open = true
      this.title = '添加人员'
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
  },
};
</script>


<style scoped lang="scss">
</style>
