<template>
  <el-container>
    <el-header>
      <el-steps
        :active="active"
        style="width: 100%"
        :align-center="true"
        finish-status="success"
      >
        <el-step
          v-for="(item, index) of stepTitle"
          :key="index"
          :title="item"
          style="50%"
          @click="handleStep(index)"
        >
        </el-step>
      </el-steps>
    </el-header>
    <!--基本信息!-->
    <el-main class="nopadding" v-show="active === 0">
      <el-form
        ref="dialogForm"
        :model="form"
        :rules="rules"
        :disabled="mode == 'show'"
        label-width="100px"
        style="margin: 40px 40px 40px 40px"
      >
        <el-row>
          <el-col :md="8" :sm="12" :xs="24">
            <el-form-item label="来访概述">
              <el-input v-model="form.name" type="text" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :sm="12" :xs="24">
            <el-form-item label="来访时间">
              <el-date-picker
                v-model="form.visit_time"
                type="datetime"
                placeholder="选择来访时间"
              />
            </el-form-item>
          </el-col>

          <el-col :md="8" :sm="12" :xs="24">
            <el-form-item label="离开时间">
              <el-date-picker
                v-model="form.leave_time"
                type="datetime"
                placeholder="选择离开时间"
              />
            </el-form-item>
          </el-col>

          <el-col :md="8" :sm="12" :xs="24">
            <el-form-item label="来访单位">
              <el-input v-model="form.company" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="24" :xs="24">
            <el-form-item label="来访级别">
              <el-radio-group v-model="form.level">
                <el-radio-button label="10">一般</el-radio-button>
                <el-radio-button label="20">重要</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12" :xs="24">
            <el-form-item label="来访人数">
              <el-input-number
                v-model="form.count_people"
                :min="0"
                :max="32767"
                controls-position="right"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12" :xs="24">
            <el-form-item label="来访事由">
              <el-select v-model="form.purpose" placeholder="选择来访事由">
                <el-option
                  v-for="item in purposeoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="16" :sm="12" :xs="24">
            <el-form-item label="来访详述">
              <el-input
                v-model="form.description"
                type="text"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="24" :xs="24">
            <el-form-item label="接待人">
              <el-select
                v-model="form.receptionist"
                disabled
                placeholder="选择接待人"
              >
                <el-option
                  v-for="item in receptionistoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <select-user
                ref="form.receptionist"
                :user="form.receptionist"
                :closable="true"
                :multiple="false"
                @submit="refresh"
              >
              </select-user>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :md="24" :sm="12" :xs="24">
            <el-form-item>
              <el-button style="margin-top: 12px" @click="handleNextStep"
                >下一步</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>

    <!--选择人员!-->
    <el-main class="nopadding" v-show="active === 1">
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
      <scTable
        ref="table"
        :data="peoplelist"
        row-key="id"
        height='auto'
        stripe
         hideDo
         hidePagination
       
      >
        <el-table-column
          label="#"
          fixed="left"
          type="index"
          width="50"
        ></el-table-column>

        <el-table-column
          label="访客姓名"
          prop="visitor_.name"
        ></el-table-column>
        <el-table-column
          label="访客手机号"
          prop="visitor_.phone"
        ></el-table-column>
        <el-table-column
          label="访客身份证号"
          prop="visitor_.id_number"
        ></el-table-column>
        <el-table-column label="是否重要访客" prop="is_main">
          <template #default="scope"
            ><el-space v-if="scope.row.is_main == true">是</el-space>
            <el-space v-else>否</el-space>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" fixed="right" align="left" width="170">
          <template #default="scope">
            <el-button-group>
              <el-button
                text
                type="primary"
                size="small"
                @click="table_del(scope.row)"
                >删除</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
      <sc-dialog v-model="dialogpeople" draggable title="创建来访人员">
        <el-form
          ref="dialofrom"
          :model="formpeople"
          :rules="rules"
          :disabled="mode === 'show'"
          label-width="120px"
        >
          <el-row>
            <el-col :md="12" :sm="24">
              <el-form-item label="访客姓名" prop="visitor">
                <el-select
                  v-model="formpeople.visitor"
                  placeholder="选择接待人"
                >
                  <el-option
                    v-for="item in visitoroptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="是否主访客" prop="is_main">
                <el-radio-group v-model="formpeople.is_main">
                  <el-radio-button label="true">是</el-radio-button>
                  <el-radio-button label="false">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <el-button @click="dialogpeople = false">取 消</el-button>
          <el-button type="primary" @click="submitpeople">确 定</el-button>
        </template>
      </sc-dialog>

     <span> <el-button style="margin-top: 20px" @click="handleLastStep"
        >上一步</el-button
      > </span>
      <span v-for=" item in initform.transitions" :key="item.id">
    <el-button style="margin-top: 20px" @click="submitticket(item.id)"
        >{{item.name}}</el-button
      >

      </span>
       <span>
      <el-button style="margin-top: 20px" @click="submitOut">退出</el-button> </span>
    </el-main>
  </el-container>
</template>
<style scoped>
.left-panel{
 margin:10px
}
.clearfix {
  font-size: 20px;
}

.box-card p {
  line-height: 20px;
}
.content {
  margin-top: 10px;
}
.stepSuc:hover {
  cursor: pointer;
}
.stepErr:hover {
  cursor: not-allowed;
}
</style>
    <script>
import { genTree } from "@/utils/verificate";
import selectUser from "@/layout/components/userselect";

const defaultformworker = {
  duty: "",
  rcertificates: [],
  rpj: "",
};
export default {
  name: "vistoradd",
  components: { selectUser },
  data() {
    return {
      active: 0,
      stepSuc: [0],
      form: [],
      stepTitle: ["基本信息", "选择访客"],
      receptionistoptions: [],
      purposeoptions: [
        { id: 10, name: "参观" },
        { id: 20, name: "拜访" },
        { id: 30, name: "面试" },
        { id: 40, name: "开会" },
      ],
      search: {
        keyword: null,
      },
      dialog: {
        save: false,
        permission: false,
      },
      apiObj: this.$API.vm.visit.list,
      query: {},
      selection: [],
      dialogpeople: false,
      formpeople: {
        id: "",
        visit: "",
      },
      visitoroptions: [],
      peoplelist: [],
      initform:[],
      ticket:{},
    };
  },
  mounted() {
    this.visitid = this.$route.query.visitid; //作业ID
    this.getRpj();
    this.getUser();
    this.getpeoplelistlist();
    this.getvisitorlist();
  },
  methods: {
    //访问项目基本信息
    getRpj() {
      this.$API.vm.visit.read.req(this.visitid).then((res) => {
        this.form = res;
      });
    },
    //接待人
    getUser() {
      this.$API.system.user.list.req({ page: 0 }).then((res) => {
        this.receptionistoptions = res;
      });
    },
    //渲染工单提交按钮
     getInit(){
      this.$API.wf.workflow.initkey.req('visit').then((res) => {
        this.initform = res;
         
      });
    },
    handleStep(val) {
      //点击步骤条
      if (this.stepSuc.includes(val) === true) {
        this.active = val;
      }
    },
    //组件点击上一步
    handleLastStep() {
      if (--this.active === 0) {
        this.active = 0;
      }
    },
    //组件点击下一步
    handleNextStep() {
      if (this.active == 0) {
        this.$API.vm.visit.update
          .req(this.form.id, this.form)
          .then((res) => {
            this.$message.success("基本信息更新成功！");
          
            return res;
          })
          .catch((err) => {
            return err;
          });
         this.getInit();
        this.active = 1;
      } else {
        this.active = 1;
      }
      // this.stepSuc.push(++this.active)
    },
    //退出界面
    submitOut() {
      this.$router.push({
        name: "visit",
        query: {},
      });
    },
    //添加
    add() {
      this.dialogpeople = true;
    },

    //项目访客人员
    getpeoplelistlist() {
      this.$API.vm.people.list
        .req({ visit: this.visitid, page: 0 })
        .then((res) => {
          this.peoplelist = res;
        });
    },

    //访客接待人
    getvisitorlist() {
      this.$API.vm.visitor.list.req({ page: 0 }).then((res) => {
        this.visitoroptions = res;
       
      });
    },
    //表单提交方法
    submitpeople() {
      this.formpeople.visit = this.visitid;
      this.$refs.dialofrom.validate((valid) => {
        this.$API.vm.people.create
          .req(this.formpeople)
          .then((res) => {
            this.$message.success("创建成功");
            this.dialogpeople = false;
            return res;
          })
          .catch((err) => {
            return err;
          });
      });
    },
    //删除访客信息
    table_del(row) {
      this.$API.vm.people.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("访客删除成功");

          return res;
        })
        .catch((err) => {
          return err;
        });
    },
    //提交工单
    submitticket(id){
     this.ticket={};
      this.ticket.workflow=this.initform.workflow;
       this.ticket.ticket_data={visit:this.visitid};
        this.ticket.transition=id;
       this.$API.wf.ticket.create.req(this.ticket).then((res) => {
        this.$message.success("提交成功");
        this.$router.push({
        name: "visit",
        query: {},
      });
      });

    }
  },
};
</script>