<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 }}
      </div>
      <Form :model="searchItem" inline>
        <FormItem>
          <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 style="margin:0 20px">
          <Input placeholder="输入关键字查询"></Input>
        </FormItem>
        <FormItem class="btn_tools">
          <Button type="primary" icon="ios-search" @click="getData()">
            查询
          </Button>
        </FormItem>
      </Form>
    </div>

    <div class="ivu-card flex-grow-1 m-3">
      <div class="p-3">
        <Table v-if="showTable" ref="selection" :columns="tableColumns" :data="list">
          <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">
            <sapn class="btn" @click="look(index)">详情</sapn>
            <!-- <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">
                  <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>
      <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="docompelete"></formcontent>
        </div>
      </Drawer>
    </div>
  </div>
</template>
<script>
import index from "./index.js";
export default index;
</script>
<style lang="less" scoped>
@import "./index.less";
</style>