<template>
  <div id="container_form">
    <div class="ivu-card p-3">
      <div class="search_title d-flex align-items-center">
        <span class="largeIcon">
          <img
            class="yn-modular-menuIcon"
            :src="currentPaths[2].icon"
            :onerror="this.$root.placeHoldImg"
          />
        </span>
        {{ currentPaths[2].title }}
        <span v-show="showSend"
          >&nbsp; <Icon color="#c5c8ce" type="ios-arrow-forward" />&nbsp;添加
        </span>
      </div>
      <Form :model="searchItem" inline v-if="!showSend">
        <Button type="success" icon="ios-add" @click="sendAction">
          添加
        </Button>
        <FormItem style="margin: 0 20px">
          <Button
            type="default"
            icon="ios-list-box"
            v-if="showTable"
            @click="setShowStyle(2)"
          />
          <Button
            type="default"
            icon="ios-apps"
            v-else
            @click="setShowStyle(1)"
          />
        </FormItem>
        <FormItem>
          <Input placeholder="输入关键字查询"></Input>
        </FormItem>
        <FormItem class="btn_tools" style="margin-left: 20px">
          <Button type="primary" icon="ios-search" @click="getData()">
            查询
          </Button>
        </FormItem>
      </Form>
      <div v-show="showSend" class="mt-3">
        <Button icon="ios-undo-outline" @click="showSend = false">返回</Button>
      </div>
    </div>

    <Drawer
      v-model="showContent"
      title="查看详情"
      width="40"
      :mask-closable="false"
      :styles="{
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static',
      }"
    >
      <div v-if="showContent">
        <formcontent
          :serId="lookForm.serId"
          :formId="lookForm.formId"
          @ok="showContent = false"
        ></formcontent>
      </div>
    </Drawer>

    <div class="m-3">
      <div class="ivu-card flex-grow-1">
        <div class="p-3" v-if="!showSend">
          <Table
            ref="selection"
            :columns="tableColumns"
            :data="list"
            v-if="showTable"
          >
            <template slot-scope="{ row, column, index }" slot="content">
              <div class="form-content">{{ getInfo(row, column, index) }}</div>
            </template>
            <template slot-scope="{ row, column }" slot="datepicker_start">
              <div class="form-content">
                {{ getDatePickerRang(row, column, 1) }}
              </div>
            </template>
            <template slot-scope="{ row, column }" slot="datepicker_end">
              <div class="form-content">
                {{ getDatePickerRang(row, column, 2) }}
              </div>
            </template>
            <template slot-scope="{ row, column }" slot="datepicker_timelong">
              <div class="form-content">
                {{ getDatePickerRang(row, column, 3) }}
              </div>
            </template>
            <template slot-scope="{ row }" slot="status">
              <Badge
                :status="getStatuColor(row.status, row.action)"
                :text="getStatusTitle(row.status, row.action)"
              />
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <span
                class="btn"
                @click="editForm(index)"
                v-if="
                  row.status != 1 &&
                  row.action < 3 &&
                  formSet &&
                  formSet.editSet &&
                  formSet.editSet.formItems.length > 0 &&
                  userInfo.uid == row.uid
                "
                >编辑</span
              >
              <span class="btn" @click="deleteForm(index)">删除</span>
              <sapn class="btn" @click="look(index)">详情</sapn>
              <!-- <Button type="primary" style="margin-right: 5px" size="small" @click="editForm(index)" v-if="row.status != 1 &&
                row.action < 3 &&
                formSet &&
                formSet.editSet &&
                formSet.editSet.formItems.length > 0 &&
                userInfo.uid == row.uid
                ">编辑</Button>
              <Button type="error" size="small" @click="deleteForm(index)">删除</Button>
              <Button type="primary" style="margin-right: 5px" size="small" @click="look(index)">详情</Button> -->
            </template>
          </Table>
          <div v-if="!showTable">
            <Row :gutter="20">
              <Col :span="6" v-for="(item, index) in list" :key="index">
                <Card class="content">
                  <div>
                    <div class="title">
                      <div>
                        {{ formTitle(item, formSet) }}
                      </div>
                    </div>

                    <div
                      class="info"
                      v-for="(info, index2) in formContent(item, formSet)"
                      :key="index2"
                    >
                      {{ info }}
                    </div>

                    <div class="author">
                      <div style="display: flex; align-items: center">
                        <div class="">
                          {{ dateFormatter(item.createTime) }}
                        </div>
                        <Tag
                          v-if="formInfo.type != 2"
                          class="tag"
                          size="small"
                          type="border"
                          :color="formStatusType(item.status, item.action)"
                          style="margin-left: 10px; margin-bottom: 3px"
                          >{{ formStatus(item.status, item.action) }}
                        </Tag>
                      </div>
                    </div>

                    <div class="bottom">
                      <Button
                        type="text"
                        icon="md-brush"
                        @click="editForm(index)"
                        v-if="
                          item.status != 1 &&
                          item.action < 3 &&
                          formSet &&
                          formSet.editSet &&
                          formSet.editSet.formItems.length > 0 &&
                          userInfo.uid == item.uid
                        "
                        >编辑</Button
                      >
                      <div
                        class="space"
                        v-if="
                          item.status != 1 &&
                          item.action < 3 &&
                          formSet &&
                          formSet.editSet &&
                          formSet.editSet.formItems.length > 0 &&
                          userInfo.uid == item.uid
                        "
                      />

                      <Button
                        type="text"
                        icon="md-trash"
                        @click.stop="deleteForm(index)"
                        >删除</Button
                      >

                      <div class="space" />
                      <Button type="text" icon="md-search" @click="look(index)"
                        >详情</Button
                      >
                    </div>
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
          <div style="margin: 10px; overflow: hidden">
            <div style="float: right">
              <Page
                :total="total"
                :page-size-opts="pageOpt"
                show-sizer
                :current="currentPage"
                :page-size="currentPageSize"
                @on-page-size-change="pageSizeChange"
                @on-change="pageChange"
              ></Page>
            </div>
          </div>
        </div>

        <div v-if="showSend" class="p-3 w-60" style="margin: 0 auto">
          <Form
            :model="formInfo"
            label-position="top"
            style="height: 65vh; overflow: scroll"
          >
            <div v-for="(item, index) in formInfo.formList" :key="index">
              <!-- 当前个人信息 -->
              <div v-if="item.set.control == 'user_baseinfo'">
                <FormItem :required="item.set.required" label="姓名">
                  <Input disabled :value="user.name"></Input>
                </FormItem>
                <FormItem
                  :required="item.set.required"
                  label="班级"
                  v-if="user.type == 'student'"
                >
                  <Input disabled :value="user.className"></Input>
                </FormItem>
                <FormItem
                  :required="item.set.required"
                  label="性别"
                  v-if="user.type == 'student'"
                >
                  <Input disabled :value="getGender(user.gender)"></Input>
                </FormItem>
              </div>
              <!-- 时间区间 -->
              <div
                v-else-if="
                  item.set.control == 'datepicker' && item.set.type == 'range'
                "
              >
                <FormItem :required="item.set.required" :label="item.set.title">
                  <div v-if="item.set.isTil">
                    <DatePicker
                      :value="item.set.start"
                      :type="item.set.unit"
                      :placeholder="item.set.title"
                      @on-change="setStart(item.set, $event)"
                      style="margin-right: 10px"
                    />
                    <Select
                      v-model="item.set.startIndex"
                      style="width: 200px"
                      @on-change="startChange($event, item.set)"
                    >
                      <Option
                        v-for="(item, indexd) in dateDay"
                        :value="indexd"
                        :key="indexd"
                        >{{ item.title }}</Option
                      >
                    </Select>
                  </div>
                  <div v-else>
                    <DatePicker
                      :value="item.set.start"
                      :type="item.set.unit"
                      :placeholder="item.set.title2"
                      @on-change="setStart(item.set, $event)"
                    />
                  </div>
                </FormItem>
                <FormItem
                  :required="item.set.required"
                  :label="item.set.title2"
                >
                  <div v-if="item.set.isTil">
                    <DatePicker
                      :value="item.set.end"
                      :type="item.set.unit"
                      :placeholder="item.set.title2"
                      @on-change="setEnd(item.set, $event)"
                      style="margin-right: 10px"
                    />
                    <Select
                      v-model="item.set.endIndex"
                      style="width: 200px"
                      @on-change="endChange($event, item.set)"
                    >
                      <Option
                        v-for="(item, indexd) in dateDay"
                        :value="indexd"
                        :key="indexd"
                        >{{ item.title }}</Option
                      >
                    </Select>
                  </div>
                  <div v-else>
                    <DatePicker
                      :value="item.set.end"
                      :type="item.set.unit"
                      :placeholder="item.set.title2"
                      @on-change="setEnd(item.set, $event)"
                    />
                  </div>
                </FormItem>
                <FormItem
                  v-if="item.set.isDuration"
                  :required="item.set.required"
                  :label="
                    item.set.timeLongTitle +
                    (item.set.unit == 'datetime' ? '（小时）' : '（天）')
                  "
                >
                  <Input class="m-input" disabled v-model="item.set.value" />
                </FormItem>
              </div>
              <div v-else-if="item.set.control == 'label'">
                <div class="tips">*{{ item.set.value }}</div>
              </div>
              <div v-else>
                <FormItem :label="item.set.title" :required="item.set.required">
                  <!-- 文本框 -->
                  <Input
                    class="m-input"
                    v-if="item.set.control == 'input'"
                    :placeholder="item.set.placeholder"
                    :clearable="false"
                    v-model="item.set.value"
                    :disabled="canEdit(item.set)"
                    :type="
                      item.set.type == null || item.set.type.length == 0
                        ? 'text'
                        : item.set.type
                    "
                  />

                  <div
                    v-if="
                      item.set.control == 'hq_wz' || item.set.control == 'wz_sq'
                    "
                    v-for="(wz, i) in item.set.value"
                    :key="i"
                  >
                    <Row :gutter="10">
                      <Col :span="14">
                        <FormItem label="物品">
                          <Input
                            class="m-input"
                            disabled
                            :value="wz.title"
                          ></Input>
                        </FormItem>
                      </Col>
                      <Col :span="8">
                        <FormItem label="申请数量">
                          <!-- <input class="m-input" type="number" :value="wz.count"></input> -->
                          <!-- <uni-number-box class="m-input-number"  :min="1" v-model="wz.count"></uni-number-box> -->
                          <InputNumber
                            :min="1"
                            v-model="wz.count"
                            @on-change="initFlow()"
                          ></InputNumber>
                        </FormItem>
                      </Col>
                      <Col :span="2">
                        <FormItem label=" ">
                          <Icon
                            style="margin-left: 10px"
                            size="20"
                            type="md-trash"
                            @click="removeWZ(i, item.set)"
                          />
                          <!-- <uni-icons style="margin-left: 10px;" size="30" type="trash" @click="removeWZ(i,item.set)"></uni-icons> -->
                        </FormItem>
                      </Col>
                    </Row>
                  </div>
                  <div
                    class="wz_bt"
                    v-if="
                      item.set.control == 'hq_wz' || item.set.control == 'wz_sq'
                    "
                  >
                    <Button class="btn" @click="addWz(item)">{{
                      item.set.placeholder
                    }}</Button>
                  </div>

                  <div v-if="item.set.control == 'xb_editor'">
                    <tinymce
                      id="myedit"
                      ref="editor"
                      v-model="item.set.value"
                      :baseUrl="baseURL"
                    ></tinymce>
                  </div>

                  <!-- 单选 -->
                  <div v-if="item.set.control == 'radio'">
                    <!-- 平铺 -->
                    <!-- v-if="item.set.isTil" -->
                    <div class="m-radio-group">
                      <RadioGroup
                        @on-change="radioChange(item.set, $event)"
                        class=""
                        :disabled="canEdit(item.set)"
                        v-model="item.set.value"
                      >
                        <div
                          class="m-radio-item"
                          v-for="radio in item.set.optionList"
                          :key="radio.title"
                        >
                          <label>
                            <Radio
                              :label="radio.title"
                              :disabled="canEdit(item.set)"
                            />
                          </label>
                        </div>
                      </RadioGroup>
                    </div>
                  </div>

                  <div v-if="item.set.control == 'checkbox'">
                    <!-- v-if="item.set.isTil" -->
                    <div class="m-radio-group">
                      <CheckboxGroup
                        :disabled="canEdit(item.set)"
                        v-model="item.set.value"
                      >
                        <div
                          class="m-check-item"
                          v-for="check in item.set.optionList"
                          :key="check.title"
                        >
                          <label>
                            <div>
                              <Checkbox
                                :label="check.title"
                                :disabled="canEdit(item.set)"
                              />
                            </div>
                          </label>
                        </div>
                      </CheckboxGroup>
                    </div>
                  </div>

                  <!-- 单选 -->
                  <!-- <div v-if="item.set.control == 'radio'">
                 
                  <div class="m-radio-group" v-if="item.set.isTil">
                    <RadioGroup
                      class="m-radio-item"
                      :disabled="canEdit(item.set)"
                      v-for="radio in item.set.optionList"
                      :key="radio.title"
                      v-model="item.set.value"
                      @on-change="radioChange(item.set, $event)"
                    >
                      <label class="uni-list-cell">
                        <Radio
                          :label="radio.title"
                          :disabled="canEdit(item.set)"
                        />
                      </label>
                    </RadioGroup>
                  </div>
                </div> -->
                  <!-- 图片/附件上传 -->
                  <div v-if="item.set.control == 'upload'">
                    <yn-upload
                      :ref="item.set.setId"
                      :value="item.set.uploadFiles"
                      config="OA/Form"
                      :accept="
                        item.set.type == null ||
                        item.set.type.length == 0 ||
                        item.set.type == 'image'
                          ? 'image/jpeg,image/jpg,image/png'
                          : item.set.type
                      "
                      :max="item.set.count"
                      @fileChange="changeFile($event, item.set.setId)"
                    >
                    </yn-upload>
                  </div>
                  <!-- 班级学生 -->

                  <div v-if="item.set.control == 'class_stu'" class="nameList">
                    <div class="name" v-if="item.set.value.title">
                      {{ item.set.value.title }}
                    </div>
                    <Yn-MultiUser
                      type="student"
                      @on-select="selectSignalInfo(item.set, $event)"
                      :targetList="targetList"
                      :title="item.set.title"
                      :maxNum="1"
                    >
                    </Yn-MultiUser>
                  </div>

                  <div v-if="item.set.control == 'xb_place'" class="nameList">
                    <selectinfo
                      type="place"
                      :value="item.set.value"
                      :placeholder="item.set.title"
                      @input="selectSignalInfo(item.set, $event)"
                    ></selectinfo>
                  </div>
                  <div v-if="item.set.control == 'xb_teacher'" class="nameList">
                    <selectinfo
                      type="teacher"
                      :value="item.set.value"
                      :placeholder="item.set.title"
                      @input="selectSignalInfo(item.set, $event)"
                    ></selectinfo>
                  </div>

                  <div v-if="item.set.control == 'xb_grade'" class="nameList">
                    <selectinfo
                      :level="1"
                      type="grade"
                      :value="item.set.value"
                      :placeholder="item.set.title"
                      @input="selectSignalInfo(item.set, $event)"
                    ></selectinfo>
                  </div>

                  <div v-if="item.set.control == 'xb_sub'" class="nameList">
                    <selectinfo
                      :level="1"
                      type="subject"
                      :value="item.set.value"
                      :placeholder="item.set.title"
                      @input="selectSignalInfo(item.set, $event)"
                    ></selectinfo>
                  </div>

                  <!-- 教学周 -->
                  <div v-if="item.set.control == 'school_week'">
                    <Select
                      v-model="item.set.value.weekIndex"
                      style="width: 100%"
                      :disabled="canEdit(item.set)"
                      :placeholder="item.set.placeholder"
                    >
                      <Option
                        v-for="(item, indexd) in weekList"
                        :value="indexd + 1"
                        :key="indexd"
                        >{{ item.title }}
                      </Option>
                    </Select>
                  </div>

                  <div v-if="item.set.control == 'datepicker'">
                    <DatePicker
                      :value="item.set.value"
                      :type="item.set.unit"
                      :placeholder="item.set.title"
                      @on-change="timeChange(item.set, $event)"
                    />
                  </div>
                </FormItem>
              </div>
            </div>

            <!-- 流程 -->
            <div class="flow" v-if="flows.length > 1">
              <div class="title">流程</div>
              <div class="content_form">
                <div v-for="(item, index) in flows" :key="index">
                  <div class="flowItem">
                    <div class="" style="position: relative">
                      <image
                        class="tx"
                        src="../../../static/tx.png"
                        mode="widthFix"
                      ></image>
                      <div class="line"></div>
                    </div>
                    <div class="flowcontent">
                      <div class="header_flow">
                        <div>
                          {{ item.flowTitle }}
                        </div>
                      </div>

                      <div class="nameList">
                        <div
                          class="name"
                          v-for="(user, i) in item.users"
                          :key="i"
                        >
                          {{ user.title }}

                          <uni-icons
                            v-if="user.isSelfSelect && item.flowType == 2"
                            @click="removeUser(i, item)"
                            type="closeempty"
                            size="12"
                            style="margin-left: 8px"
                          ></uni-icons>
                        </div>
                        <!-- 如果是办理的话：审核步骤才出现 -->
                        <!-- 抄送的话，发送人和审核人 -->
                        <!-- 且步骤是未完成的时候才可以 -->
                        <div
                          class="name"
                          v-if="item.ccSelfSelectFlag && item.flowType == 3"
                        >
                          审核人自选
                        </div>
                        <uni-icons
                          v-if="item.ccSelfSelectFlag && item.flowType == 2"
                          type="plu -->s"
                          size="24"
                          @click="selectUser(item)"
                        ></uni-icons>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Form>
          <div class="w-100 mt-3">
            <Button type="primary" long @click="checkSub">提交</Button>
          </div>
        </div>

        <!-- 发送 -->

        <Drawer
          title="选择物资信息"
          v-model="showPopu"
          width="720"
          :mask-closable="false"
          :styles="styles"
        >
          <Form :model="formData">
            <FormItem label="物资类型" label-position="top" required>
              <Select
                v-model="formData.wzType"
                placeholder="请选择物资类型"
                @on-change="typeChange"
              >
                <Option
                  v-for="item in typeList"
                  :value="item.codeId"
                  :key="item.codeId"
                  >{{ item.codeName }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="物资信息" label-position="top" required>
              <Select
                v-model="formData.index"
                placeholder="请选择物资信息"
                @on-change="wzChange"
              >
                <Option
                  v-for="(item, index) in wzList"
                  :value="index"
                  :key="index"
                >
                  {{item.ggbz && item.ggbz.length > 0 ? (item.title + "（" + item.ggbz + "）"): item.title  }}
                 
                </Option>
              </Select>
            </FormItem>

            <FormItem label="申请数量" label-position="top" required>
              <InputNumber :min="1" v-model="formData.count"></InputNumber>
            </FormItem>
          </Form>
          <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="showPopu = false"
              >取消</Button
            >
            <Button type="primary" @click="savePopu">确定</Button>
          </div>
        </Drawer>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import "./index.less";

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
<script>
import index from "./index.js";
export default index;
</script>
