<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="dataForm" label-width="120px">
      <el-card style="margin-top: -5px;">
        <el-row>
          <el-col :span="11">
            <el-form-item label="单据标识:" prop="type">
              <el-input v-model="formData.type" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="单据名称:" prop="typeName">
              <el-input v-model="formData.typeName" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <el-card>
      <el-row type="flex" justify="end">
        <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px">
          <el-button v-if="!addVisible " type="primary" @click.native="add()" round>新增节点</el-button>
          <el-button v-if="addVisible " type="primary" @click.native="add()" round>取消新增节点</el-button>
        </el-button-group>
      </el-row>

      <el-form :model="addformData" class="order-el-form" ref="dataForm" label-width="120px">
        <el-row v-show="addVisible" type="flex">

          <el-col :span="5">
            <el-form-item label="审批节点类型:" prop="approvalNodeType">
              <el-select v-model="addformData.approvalNodeType"  placeholder="审批节点类型"  clearable>
                <el-option label="人员" :value=1></el-option>
<!--                <el-option label="岗位" :value=2></el-option>-->
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5" v-if="addformData.approvalNodeType == 1">
            <el-form-item prop="userName" label="审批人员:">
              <el-select
                v-model="addformData.approvalUserId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入审批人员信息"
                :remote-method="findMethod"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.employeeName"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.employeeName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col :span="5" v-if="addformData.approvalNodeType == 2">
            <el-form-item prop="userName" label="审批岗位:">
              <el-select
                v-model="addformData.approvalPostId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入审批岗位信息"
              >
                <el-option
                  v-for="item in sysPostMap"
                  :key="item.id"
                  :label="item.postName"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.postName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="approvalSort" label="审批顺序:">
              <el-input-number
                v-model="addformData.approvalSort"
                auto-complete="off"
                clearable
                placeholder="请输入审批顺序" oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="2">
          </el-col>
          <el-col :span="6">
            <el-button type="success" round @click.native="addConfigMx()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 时间线 -->
      <div class="block" style="padding-top: 40px; padding-left: 200px">
        <el-timeline>
          <el-timeline-item v-for="(activity,index) in activities"
                            :key="index">


            <el-card style="width: 85%" shadow="hover">
              <div class="content">

                <span v-if="activity.approvalNodeType == 1"><b>审批人：</b>{{ activity.approvalUserName }}</span>
                <span v-if="activity.approvalNodeType == 2"><b>审批岗位：</b>{{ activity.approvalPostName }}</span>
                <span><b>审批顺序：</b>{{ activity.approvalSort }}</span>
                <span>
<!--                    <el-button type='primary' icon='el-icon-edit' circle @click.native="edit()"></el-button>-->
                    <el-button type='danger' icon='el-icon-delete' circle @click.native="removeDetail(activity.id)"></el-button>
                  </span>
              </div>
            </el-card>


          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

  </div>
</template>

<script>
import {getConfigDetailList,addConfigDetail,removeDetail} from "@/api/basic/sysApprovalFlowConfig";
import {companyUserList} from "@/api/auth/authAdmin";
// import { optionSelectPost } from "@/api/post/post";

export default {
  name: "sysApprovalFlowConfigEdit",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    idQuery: {
      type: Object,
      required: true,
    },
    isChang: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      input: '',
      userList: [],
      sysPostMap: [],
      addVisible: false,
      addformData: {
        type: '',
        approvalUserName: '',
        approvalSort: '',
        approvalUserId: '',
        approvalNodeType: 1,
        approvalPostId: '',
        approvalPostName: '',
      },
      query: {
        type: ''
      },
      innerQuery: {
        userName: ''
      },
      formData: {
        type: '',
        typeName: ''
      },
      showSearch: true,
      activities: [],
      filterQuery: {
        keyWords: '',
        type: '',
        typeName: '',
        page: 1,
        limit: 10
      },
      list: [],
      total: 0,
      idQuery: {},
    }
  },
  methods: {
    removeDetail(id){
      removeDetail(id).then((response) => {
        if (response.code !== 20000) {
          this.$message.error(response.message);
          return false
        }
        this.getList();
      })
        .catch(() => {
        })

    },
    addConfigMx() {

      if (this.addformData.approvalNodeType == 1) {
        const selectedItem = this.userList.find((item) => { // 这里的chargingWorkNameList就是上面遍历的数据源
          return item.id === this.addformData.approvalUserId
        })
        this.addformData.approvalUserName = selectedItem.employeeName
      }else {
        const selectedItem = this.sysPostMap.find((item) => { // 这里的chargingWorkNameList就是上面遍历的数据源
          return item.id === this.addformData.approvalPostId
        })
        this.addformData.approvalPostName = selectedItem.postName
      }
      this.addformData.type = this.formData.type
      addConfigDetail(this.addformData)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.addformData =  {
              type: '',
              approvalUserName: '',
              approvalSort: '',
              approvalUserId: '',
              approvalNodeType: 1,
              approvalPostId: '',
              approvalPostName: '',
            }
          }else {
            this.$message.error(response.message);
            return false
          }
          this.getList();
        })
        .catch(() => {
          this.unitLoading = false;
          this.userList = [];
        })

      this.add();

    },
    findMethod(query) {
      this.fromOptions = [];
      let cQuery = {
        userName: query.trim()
      };
      companyUserList(cQuery)
        .then((response) => {
          this.loading = false;
          if (response.code !== 20000) {
            this.$message.error(response.message);
            return false
          }
          this.userList = response.data || [];
          this.unitLoading = false;
        })
        .catch(() => {
          this.unitLoading = false;
          this.userList = [];
        })
    },
    selectMediaId(id) {
      console.log(id, '选中的ID值')
      const selectedItem = this.materialList.find((item) => { // 这里的chargingWorkNameList就是上面遍历的数据源
        return item.id === id
        // 筛选出匹配数据，是对应数据的整个对象
      })
      console.log(selectedItem, '当前选项的对象')
    },
    add() {
      this.addVisible = !this.addVisible
    },
    optionSelectPost(){
      // optionSelectPost().then((response) => {
      //   if (response.code == 20000) {
      //     this.sysPostMap = response.data;
      //   }
      // }).catch(() => {
      // });
    },
    getList() {
      this.loading = true;
      this.query.type = this.idQuery.type
      getConfigDetailList(this.query) //查找该单号下的所有条码
        .then((response) => {
          this.activities = response.data || [];
          this.total = response.data.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });

    }

  },
  watch: {
    'searchcursom': {
      handler: function () {
        this.focusCustomer()
      }
    }
  },
  computed: {},
  components: {
    getConfigDetailList
  },
  created() {
    this.formData = this.idQuery.formData;
    this.getList();
    this.optionSelectPost();
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.content {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px;

  span {
    flex: 1;
  }
}
</style>
