<template>
  <div>
    <sd-super-search-form
      :isopen="searchform.isopen"
      @superBtnClick="superBtnClick"
      @search-submit="searchSubmit"
    >
      <template v-slot:search>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="业务类型">
              <a-select v-decorator="['trusteeName']">
                <a-select-option value="jack">
                  Jack
                </a-select-option>
                <a-select-option value="lucy">
                  Lucy
                </a-select-option>
                <a-select-option value="disabled">
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe">
                  yiminghe
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item label="标题" :label-col="{ span: 3 }">
              <a-input v-decorator="['title']" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="委托人">
              <a-select v-decorator="['flowName']">
                <a-select-option value="jack">
                  Jack
                </a-select-option>
                <a-select-option value="lucy">
                  Lucy
                </a-select-option>
                <a-select-option value="disabled">
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe">
                  yiminghe
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="被委托环节">
              <a-select v-decorator="['flowName']">
                <a-select-option value="jack">
                  Jack
                </a-select-option>
                <a-select-option value="lucy">
                  Lucy
                </a-select-option>
                <a-select-option value="disabled">
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe">
                  yiminghe
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="办理时间">
              <a-date-picker
                v-decorator="['finishDate']"
                type="date"
                placeholder="请选择日期"
                :class="$style.date"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </template>
    </sd-super-search-form>
    <sd-data-table
      ref="dataTable2"
      data-url="api/framework/v1/delegation/my-entrusted"
      :columns="columns2"
      :process-req="processReq"
      :search-fields="['trustorName']"
      @rowClick="rowClick"
    >
    </sd-data-table>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import storeMixin from '@/common/store-mixin'
import TableColumnTypes from '../../common/services/table-column-types'
import components from './_import-components/sd-my-accept-entrust-import'
export default {
  name: 'SdMyAcceptEntrust',
  components,
  mixins: [storeMixin],
  data() {
    return {
      columns2: [
        {
          title: '状态',
          dataIndex: 'status',
          sdRender: TableColumnTypes.statusBadge,
        },
        {
          title: '委托人',
          dataIndex: 'trustorName',
        },

        {
          title: '开始时间',
          dataIndex: 'startDate',
          sdRender: TableColumnTypes.dateTime,
          sorter: true,
        },
        {
          title: '结束时间',
          sdRender: TableColumnTypes.dateTime,
          dataIndex: 'finishDate',
          sorter: true,
        },
        {
          title: '流程名称',
          dataIndex: 'flowName',
        },
        {
          title: '备注',
          dataIndex: 'note',
        },
      ],
      searchform: {
        isopen: false,
      },
    }
  },
  computed: {},
  created() {},
  methods: {
    rowClick(record, { rowIndex }) {
      this.mobal.title = '委托设置'
      this.mobal.visible = true
      // alert(`记录内容：${JSON.stringify(record)} rowIndex：${rowIndex}`)
    },
    // 列表传参
    processReq(req) {
      if (req.data?.expressions[0]) {
        const exp = req.data.expressions[0].expressionsValue
        req.data.expressions = exp
      }
      return req
    },
    // 高级搜索展开按钮事件
    superBtnClick() {
      this.searchform.isopen = !this.searchform.isopen
    },
    // 高级查询按钮
    searchSubmit(val) {
      Message.success(`搜索条件为${val}`)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.date {
  width: 100%;
}
</style>
