<template>
  <a-page-header-wrapper title="查询表格">
    <a-card :bordered="false">
      <div class="tableList">
        <div class="tableListForm">
          <a-form v-show="!expandForm" layout="inline" :model="query" :form="form">
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item label="应用名称" prop="app_name" v-decorator="['app_name']">
                  <a-input v-model="query.app_name" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="应用类别" prop="category" v-decorator="['category']">
                  <a-select
                    v-model="query.category"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <a-option
                      :value="item.value"
                      v-for="item in categoryList"
                      :key="item.value"
                      >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span class="submitButtons">
                  <a-button type="primary" htmlType="submit" @click="onQuery">
                    查询
                  </a-button>
                  <a-button :style="{ marginLeft: '8px' }" @click="resetForm"> 重置 </a-button>
                  <a :style="{ marginLeft: '8px' }" @click="toggleForm">
                    展开 <a-icon type="down" />
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
          <a-form v-show="expandForm" layout="inline" :model="query"  :form="form">
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item label="应用名称" prop="app_name" v-decorator="['app_name']">
                  <a-input v-model="query.app_name" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="应用类别" prop="category" v-decorator="['category']">
                  <a-select
                    v-model="query.category"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <a-option
                      :value="item.value"
                      v-for="item in categoryList"
                      :key="item.value"
                      >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="应用版本号" prop="app_version" v-decorator="['app_version']">
                  <a-input v-model="query.app_version" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item label="创建时间" prop="create_at" v-decorator="['create_at']">
                  <a-range-picker
                    v-model="query.create_at"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="应用尺寸" prop="app_screen_size" v-decorator="['app_screen_size']">
                  <a-select v-model="query.app_screen_size">
                    <a-select-option
                      v-for="item in sizeList"
                      :key="item.value"
                      :value="item.label"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="适配平台" prop="app_arch"  v-decorator="['app_arch']">
                  <a-select v-model="query.app_arch">
                    <a-select-option
                      v-for="item in portList"
                      :key="item.value"
                      :value="item.label"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <div style="overflow: hidden">
              <div :style="{ float: 'right', marginBottom: '24px' }">
                <a-button type="primary" htmlType="submit" @click="onQuery">
                  查询
                </a-button>
                <a-button :style="{ marginLeft: '8px' }" @click="resetForm"> 重置 </a-button>
                <a :style="{ marginLeft: '8px' }" @click="toggleForm">
                  收起 <a-icon type="up" />
                </a>
              </div>
            </div>
          </a-form>
        </div>
        <div class="tableListOperator">
          <a-button icon="plus" type="primary" @click="openForm">
            新建
          </a-button>
          <span v-show="selectedRowKeys.length > 0">
            <a-button> 批量操作 </a-button>
            <a-dropdown overlay="{menu}">
              <a-button> 更多操作 <icon type="down" /> </a-button>
            </a-dropdown>
          </span>
        </div>
        <!-- <StandardTable
          selectedRows="{selectedRows}"
          loading="{loading}"
          data="{data}"
          columns="{this.columns}"
          onSelectRow="{this.handleSelectRows}"
          onChange="{this.handleStandardTableChange}"
        /> -->
        <a-table
          :columns="columns"
          :rowKey="(record) => record.uuid"
          :dataSource="tableData.list"
          :pagination="tableData.pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
          <template slot="login" slot-scope="login">
            {{ login.app_name }}
          </template>
          <template slot="name" slot-scope="name">
            {{ name.first }} {{ name.last }}
          </template>
          <template slot="registered" slot-scope="registered">
            {{ registered.date }} ({{ registered.age }})
          </template>
          <template
            slot="expandedRowRender"
            slot-scope="record"
            style="margin: 0"
          >
            <p :style="[sya, syb]">
              <a-avatar :src="record.picture" shape="square" :size="128" />
            </p>
            <p :style="[sya]">Personal</p>
            <a-row>
              <a-col :span="6">
                <a-description-item
                  title="应用名称"
                  :content="record.app_name"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="应用版本"
                  :content="record.app_version"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="应用类别"
                  :content="record.category"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="下载地址"
                  :content="record.download_url"
                />
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-description-item title="Country" :content="record.nat" />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="创建日期"
                  :content="record.create_at"
                />
              </a-col>
              <a-col :span="12">
                <a-description-item
                  title="应用描述"
                  :content="record.remarks"
                />
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12"> </a-col>
              <a-col :span="12"> </a-col>
            </a-row>
            <a-divider />
            <p :style="[sya]">Contacts</p>
            <a-row>
              <a-col :span="6">
                <a-description-item title="Email" :content="record.email" />
              </a-col>
              <a-col :span="6">
                <a-description-item title="Cell" :content="record.cell" />
              </a-col>
              <a-col :span="6">
                <a-description-item title="Phone" :content="record.phone" />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="Coordinates"
                  :content="record.latitude + ' ' + record.longitude"
                />
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-description-item
                  title="Registered"
                  :content="record.date + ' (' + record.age + ')'"
                />
              </a-col>
            </a-row>
          </template>
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="rebuildApplication(record)"
              >重新打包</a
            >
            <a-divider type="vertical" />
            <a href="javascript:;" @click="deleteApplication(record)">删除</a>
          </template>
        </a-table>
      </div>
    </a-card>
  </a-page-header-wrapper>
</template>

<script>
import {
  Avatar,
  Row,
  Col,
  Card,
  List,
  Button,
  Form,
  Icon,
  Table,
  Divider,
  Dropdown,
  Input,
  Select,
  DatePicker,
  message,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
  {
    title: "应用名称",
    dataIndex: "app_name",
    width: "15%",
  },
  {
    title: "应用版本号",
    dataIndex: "app_version",
  },
  {
    title: "应用类别",
    dataIndex: "category",
  },
  {
    title: "文件大小",
    dataIndex: "app_file_size",
  },
  {
    title: "应用尺寸",
    dataIndex: "app_screen_size",
  },
  {
    title: "适用平台",
    dataIndex: "app_arch",
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
// import { mapGetters } from "vuex";
import {
  getApplicationList,
  rebuildApplication,
  deleteApplication,
} from "@/api/openapi";

import { mapTrim } from "@/utils/index";

export default {
  name: "ApplicationIndex",
  data: () => ({
    expandForm: false,
    selectedRowKeys: [],
    columns,
    sya: {
      fontSize: "16px",
      color: "rgba(0,0,0,0.85)",
      lineHeight: "24px",
      display: "block",
      marginBottom: "16px",
    },
    syb: {
      marginBottom: "24px",
    },
    query: {
      app_name: null,
      category: null,
      app_version: null,
      app_screen_size: null,
      app_arch: null,
      create_at: null,
    },
    categoryList: [
      { label: "影音视听", value: 1 },
      { label: "实用工具", value: 2 },
      { label: "图书阅读", value: 3 },
      { label: "学习教育", value: 4 },
      { label: "医疗健康", value: 5 },
      { label: "未定义", value: 6 },
    ],
    sizeList: [
      { label: "240 * 240", value: 1 },
      { label: "390 * 390", value: 2 },
      { label: "450 * 450", value: 3 },
    ],
    portList: [
      { label: "ASR3601", value: 1 },
      { label: "ASR3603", value: 2 },
    ],
    loading: false,
    post: {
      page: 1,
      pageSize: 15,
    },
    tableData: {
      list: [],
      pagination: {
        pageSize: 15,
        total: 200,
      },
    },
  }),
  async asyncData({ store, route }, config = { results: 15 }) {
    await store.dispatch("frontend/openapi/getUsers", {
      ...config,
      path: route.path,
    });
  },
  components: {
    Icon,
    APageHeaderWrapper: PageHeaderWrapper,
    AAvatar: Avatar,
    ARow: Row,
    ACol: Col,
    ACard: Card,
    ACardGrid: Card.Grid,
    ACardMeta: Card.Meta,
    AList: List,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    AIcon: Icon,
    ATable: Table,
    ADescriptionItem: DescriptionItem,
    ADivider: Divider,
    ADropdown: Dropdown,
    AInput: Input,
    ASelect: Select,
    AOption: Select.Option,
    ASelectOption: Select.Option,
    ARangePicker: DatePicker.RangePicker,
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {});
  },
  methods: {
    resetForm() {
      this.$nextTick(() => {
        this.form.resetFields();
      })
    },
    toggleForm() {
      this.expandForm = !this.expandForm;
    },
    onQuery() {
      this.getApplicationList();
    },
    onSelectChange(selectedRowKeys) {
      window.console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    openForm() {
      this.$router.push({ path: "/application/form" });
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
      this.post.page = pagination.current;
      this.post.pageSize = pagination.pageSize;
      this.getApplicationList();
      // const pager = { ...this.users.pagination };
      // pager.current = pagination.current;
      // this.users.pagination = pager;
      // this.$options.asyncData(
      //   { store: this.$store, route: this.$route },
      //   {
      //     results: pagination.pageSize,
      //     page: pagination.current,
      //     sortField: sorter.field,
      //     sortOrder: sorter.order,
      //     ...filters,
      //   }
      // );
    },
    getApplicationList() {
      let opts = mapTrim(this.query);
      opts = Object.assign(opts, this.post);

      getApplicationList(opts)
        .then((res) => {
          if (res.code == 200) {
            this.tableData.list = res.data;
            this.tableData.pagination.pageSize = res.pageSize;
            this.tableData.pagination.total = res.total;
          }
          message.success(res.msg);
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
    rebuildApplication(record) {
      rebuildApplication(record.uuid)
        .then((res) => {
          message.success(res.msg);
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
    deleteApplication(record) {
      deleteApplication(record.uuid)
        .then((res) => {
          message.success(res.msg);
          this.getApplicationList();
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
  },
  mounted() {},
  created() {
    this.getApplicationList();
  },
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>