<template>
	<div class="trialApplication_container">
		<div class="trialApplication_top">
			<div class="left">
			<a>
				<el-button type="primary" ref="btnCn" @click="cn">中文网站</el-button>
			</a>
			<a>
				<el-button type="primary" ref="btnEn" @click="en" plain
					>英文网站</el-button
				>
			</a>
			</div>
			<div class="right">
			<a :href="exportUser" download>
				<el-button @click="searchHandle" type="primary">客户检索</el-button>
			</a>
			<el-input
				placeholder="公司名称/手机号码"
				v-model="search_txt"
				@input="searchHandle"
				clearable
				style="max-width: 500px"
				ref="searchInput"
			>
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
			</div>
		</div>
		<div class="trialApplication_cont">
			<!-- 中文官网 -->
			<el-table
			ref="table"
			:data="tableData"
			v-loading="isShowloadding"
			element-loading-text="数据加载中..."
			border
			v-if="this.lang == '中文官网'"
			>
			<el-table-column
				prop="CompanyName"
				label="企业名称"
				align="center"
				max-width="180px"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.CompanyName }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="RealName" label="姓名" align="center">
				<template slot-scope="scope" max-width="140px">
					<span>{{ scope.row.RealName }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="Phone"
				label="手机号/邮箱"
				align="center"
				min-width="125px"
				max-width="210px"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.Phone || scope.row.Email }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="Industry"
				label="所属行业"
				align="center"
				min-width="80px;"
				max-width="210px"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.Industry }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="CreateTimeStr"
				label="申请时间"
				align="center"
				min-width="150px"
				max-width="200px"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.CreateTimeStr || scope.row.CreateTime |formatTime }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="ProductInfo" label="申请品种" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.ProductInfo }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<div style="color: #4099ef; font-size: 24px">
					<span
						v-if="scope.row.Status == '待处理'"
						class="processed editsty"
						@click.stop="statusHandle(scope.row)"
						>标记处理 
					</span>
					</div>
				</template>
			</el-table-column>
			<div slot="empty" style="lineheight: 44px; margin: 60px 0; color: #999">
				<img
					src="~@/assets/img/cus_m/nodata.png"
					alt=""
					style="display: block; width: 160px; height: 128px; margin: auto"
				/>
				<span>暂无信息</span>
			</div>
			</el-table>

			<!-- 英文官网 -->
			<el-table
			v-else
			ref="table"
			:data="tableData"
			v-loading="isShowloadding"
			element-loading-text="数据加载中..."
			border
			>
			<el-table-column
				prop="CompanyName"
				label="企业名称"
				align="center"
				max-width="180px"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.CompanyName }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="RealName" label="姓名" align="center">
				<template slot-scope="scope" max-width="140px">
					<span>{{ scope.row.RealName }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="Phone"
				label="邮箱"
				align="center"
				min-width="125px"
				max-width="210px"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.Email || scope.row.Phone }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="Message"
				label="信息"
				align="center"
				min-width="150px;"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.Message }}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="CreateTimeStr"
				label="发送时间"
				align="center"
				min-width="150px"
				max-width="200px"
			>
				<template slot-scope="scope">
					<span>{{ scope.row.CreateTimeStr || scope.row.CreateTime }}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="ProductInfo" label="申请品种" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.ProductInfo }}</span>
				</template>
			</el-table-column> -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<div style="color: #4099ef; font-size: 24px">
					<span
						v-if="scope.row.Status == '待处理'"
						class="processed"
						@click.stop="statusHandle(scope.row)"
						style="font-size: 16px"
						>标记处理</span>
					</div>
				</template>
			</el-table-column>
			<div slot="empty" style="lineheight: 44px; margin: 60px 0; color: #999">
				<img
					src="~@/assets/img/cus_m/nodata.png"
					alt=""
					style="display: block; width: 160px; height: 128px; margin: auto"
				/>
				<span>暂无信息</span>
			</div>
			</el-table>

			<el-col :span="24" class="toolbar">
			<el-pagination
				layout="prev,pager,next"
				background
				:current-page="page_no"
				@current-change="handleCurrentChange"
				:page-size="pageSize"
				:total="total"
				style="float: right"
			>
			</el-pagination>
			</el-col>
		</div>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { customInterence } from "@/api/api.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      search_txt: "",
      isShowloadding: false,
      tableData: [], //表格数据
      page_no: 1,
      pageSize: 10,
      total: 0,
      isMove: false,
      lang: "中文官网",
      search_txt: "", // 搜索关键字
    };
  },
  methods: {
    /* 获取表格数据 */
   getTableData() {
      this.isShowloadding = true;
      customInterence
			.trialList({
				PageSize: 10,
				CurrentIndex: this.page_no,
				SourceType: this.lang,
				KeyWord: this.search_txt,
			})
			.then((res) => {
				if (res.Ret === 200) {
					this.total = res.Data.Paging.Totals;
				
					this.tableData = res.Data.List;
				} else {
					this.tableData = [];
				}
				this.isShowloadding = false;
			})
			.catch((err) => {
				console.log(err);
			});
   },
    /* 页码改变 */
   handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
   },
    /* 点击"未处理" */
   statusHandle(item) {
		this.$confirm("请确认已处理客户申请？", "提示", {
		type: "warning",
		})
		.then(() => {
			customInterence
				.trialStatus({
				Id: item.Id,
				})
				.then((res) => {
				
				if (res.Ret === 200) {
					this.$message.success("操作成功！");
					this.getTableData();
				}
				});
		})
		.catch(() => {});
   },
    /* 中英文按钮 */
   cn() {
		this.$refs.btnCn.$el.setAttribute(
		"class",
		"el-button el-button--primary"
		);
		this.$refs.btnCn.$el.setAttribute("plain", "false");
		this.$refs.btnEn.$el.setAttribute(
		"class",
		"el-button el-button--primary is-plain"
		);
		this.search_txt = "";
		this.lang = "中文官网";
	
		this.page_no = 1;
		this.getTableData();
   },
   en() {
      this.$refs.btnEn.$el.setAttribute(
        "class",
        "el-button el-button--primary"
      );
      this.$refs.btnEn.$el.setAttribute("plain", "false");
      this.$refs.btnCn.$el.setAttribute(
        "class",
        "el-button el-button--primary is-plain"
      );
      this.search_txt = "";
      this.lang = "英文官网";

      this.page_no = 1;
      this.getTableData();
   },
    /* 时间格式化 */
   time(str) {
      var res = "";
      res += str.split("-")[0];
      res += ".";
      res += str.split("-")[1];
      res += ".";
      res += str.split("T")[0].split("-")[2];
      res += " ";
      res += str.split("T")[1].split("+")[0];
      return res;
   },
    /* 文本框搜索 */
   searchHandle() {
      this.getTableData();
   },
  },
  mounted() {
    this.getTableData();
  },
};
</script>

<style lang="scss" scoped>
.trialApplication_container {
  .el-form-item__label {
    font-size: 16px;
    padding-right: 20px !important;
  }
  .trialApplication_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #ececec;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    .left {
      width: 215px;
    }
    .right {
      width: 617px;
    }
    a {
      float: left;
    }
    a:last-of-type {
      float: right;
      margin-left: 19px;
    }
    .el-input {
      display: inline;
      float: right;
    }
  }
  .trialApplication_cont {
    padding: 20px 30px 80px;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #ececec;
    border-radius: 4px;
  }
  /* 待处理hover效果 */
  .el-table__row td:last-of-type .cell div span {
    cursor: pointer;
  }
}
</style>