<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="add"
          v-auth="'rpj.create'"
        >新建项目</el-button>
        <el-select
          v-model="query.state"
          placeholder="项目状态"
          @change="handleQuery"
          style="margin-left: 2px"
          clearable
        >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="入厂时间始"
          end-placeholder="入厂时间止"
          style="margin-left: 2px"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="handleQuery"
          clearable
        />
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-select @change="handleFilterTypeChange" v-model="filterType">
            <el-option
              v-for="item in filterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-model="query.search"
            placeholder="名称"
            clearable
			@keyup.enter="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        stripe
        @resetQuery="resetQuery"
      >
        <el-table-column
          label="#"
          type="index"
          fixed="left"
          width="50"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="name"
          fixed="left"
          width="200"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="相关方"
          prop="rparty_name"
          width="200"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="项目类型" prop="type" width="180">
          <template #default="scope">{{ type_[scope.row.type] }} </template>
        </el-table-column>
        <el-table-column label="状态" prop="state" width="100">
          <template #default="scope">{{ state_[scope.row.state] }}</template>
        </el-table-column>
        <el-table-column label="审批状态" width="200">
          <template #default="scope">
            <span
              v-if="scope.row.ticket_ && scope.row.ticket_.state_"
              style="margin-right: 5px"
              >{{ scope.row.ticket_.state_.name }}</span
            >
            <el-tag
              v-if="scope.row.ticket_ && scope.row.ticket_.act_state"
              :type="
                scope.row.ticket_.act_state === 0
                  ? ''
                  : scope.row.ticket_.act_state === 1
                  ? ''
                  : scope.row.ticket_.act_state === 2
                  ? 'danger'
                  : scope.row.ticket_.act_state === 3
                  ? 'danger'
                  : scope.row.ticket_.act_state === 5
                  ? 'danger'
                  : scope.row.ticket_.act_state === 4
                  ? 'success'
                  : ''
              "
            >
              {{ act_states[scope.row.ticket_.act_state] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="进厂时间"
          prop="come_time"
          width="180"
        ></el-table-column>
        <el-table-column
          label="离厂时间"
          prop="leave_time"
          width="180"
        ></el-table-column>
        <el-table-column
          label="合同编号"
          prop="contract_number"
          width="180"
        ></el-table-column>
        <el-table-column
          label="所属部门"
          prop="belong_dept_name"
          width="180"
        ></el-table-column>
        <el-table-column
          label="创建人"
          prop="create_by_name"
          width="180"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="create_time"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="180">
          <template #default="scope">
            <el-button
              v-if="scope.row.state === 10"
              link
              type="primary"
              size="small"
              @click="next_add(scope.row, scope.$index)"
              v-auth="'rpj.update'"
              >继续编辑
            </el-button>

            <el-button
              link
              type="primary"
              size="small"
              @click="table_show(scope.row, scope.$index)"
              >查看
            </el-button>
            <!--<el-button
								text
								type="warning"
								size="small"
								@click="table_edit(scope.row, scope.$index)"
							>编辑
							</el-button>-->
            <el-popconfirm
              v-if="scope.row.state != 30"
              title="确定删除吗？"
              @confirm="table_del(scope.row, scope.$index)"
            >
              <template #reference>
                <el-button link type="danger" size="small" v-auth="'rpj.delete'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <!-- <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @closed="dialog.save = false"
  >
  </save-dialog> -->
  <show-dialog
    v-if="dialog.show"
    ref="showDialog"
    @closed="dialog.show = false"
  ></show-dialog>
</template>
<script>
// import saveDialog from "./rpj_form.vue";
import showDialog from "./rpj_show.vue";

export default {
  name: "remployee",
  components: {
    // saveDialog,
    showDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
        show: false,
        permission: false,
      },
      adminform: {
        username: "",
      },
      apiObj: this.$API.rpm.rpj.list,
      query: {},
      userId: "",
      selection: [],
      search: {
        search: "",
        keyword: null,
      },
      type_: {
        10: "建筑施工",
        20: "设备设施检维修",
        30: "保安保洁服务",
        40: "其他",
      },
      timeRange: [],
      filteType: "all",
      stateOptions: [
        {
          label: "创建中",
          value: 10,
        },
        {
          label: "审批中",
          value: 20,
        },
        {
          label: "待入厂",
          value: 30,
        },
        {
          label: "进行中",
          value: 40,
        },
        {
          label: "已完成",
          value: 50,
        },
        {
          label: "已关闭",
          value: 60,
        },
      ],
      state_: {
        10: "创建中",
        20: "审批中",
        30: "待入厂",
        40: "进行中",
        50: "已完成",
        60: "已关闭"
      },
      act_states: {
        0: "草稿中",
        1: "进行中",
        2: "被退回",
        3: "被撤回",
        4: "已完成",
        5: "已关闭",
      },
      filterType: "all",
      filterOptions: [
        {
          label: "全部",
          value: "all",
        },
        {
          label: "我创建的",
          value: "my",
        },
      ],
    };
  },
  mounted() {
    let userInfo = this.$TOOL.data.get("USER_INFO");
    this.userId = userInfo.id;
  },
  methods: {
    //添加
    add() {
      // this.dialog.save = true;
      // this.$nextTick(() => {
      //   this.$refs.saveDialog.open("add");
      // });
      this.$router.push({
        name: "rpjadd",
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(row);
      });
    },
    //查看
    table_show(row) {
      // debugger;
      this.dialog.show = true;
      this.$nextTick(() => {
        this.$refs.showDialog.open().setData(row);
      });
    },

    //权限设置
    permission() {
      this.dialog.permission = true;
      this.$nextTick(() => {
        this.$refs.permissionDialog.open();
      });
    },
    //删除
    async table_del(row) {
      this.$API.rpm.rpj.delete
        .req(row.id)
        .then((res) => {
          this.$message.success("删除成功");
          this.$refs.table.refresh();
          return res;
        })
        .catch((err) => {
          return err;
        });
    },
    next_add(row) {
      this.$router.push({
        name: "rpjadd",
        query: {
          rpjid: row.id, //入厂项目id
        },
      });
    },

    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "add") {
        this.$refs.table.refresh();
      } else if (mode == "edit") {
        this.$refs.table.refresh();
      }
    },
    resetQuery() {
      this.query = {};
    },
    //搜索
    handleQuery() {
      if (this.timeRange) {
        this.query.start_come = this.timeRange[0];
        this.query.end_come = this.timeRange[1];
      } else {
        this.query.end_come = null;
        this.query.start_come = null;
      }
      this.$refs.table.queryData(this.query);
    },
    handleFilterTypeChange(val) {
      if (val == "all") {
        this.query.create_by = null;
      } else if (val == "my") {
        this.query.create_by = this.userId;
      }
      this.$refs.table.queryData(this.query);
    },
  },
};
</script>
