<template>
	<div class="order-accept-citizen-portrait">
		<el-row :gutter="20">
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
				<el-card shadow="never">
					<p class="border-title mb10">基本信息</p>
					<div class="info-form">
						<p class="form-item">
							<span class="form-label">来电电话</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">姓名</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">首次来电</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">上次来电</span>
							{{ formData.phoneNo }}
						</p>
					</div>
				</el-card>
				<el-card shadow="never" class="mt20">
					<p class="border-title mb10">工单历史</p>
					<div class="info-form">
						<p class="form-item">
							<span class="form-label">全部工单</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">已办工单</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">在办工单</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">不满意工单</span>
							{{ formData.phoneNo }}
						</p>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="display: flex; align-items: center">
				<el-card class="w100" shadow="never">
					<p class="citizen-title mb10">市民画像</p>
          <div class="citizen-img-box">
            <img v-lazy="'https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_1280.png'" alt="">
          </div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
				<el-card shadow="never">
					<p class="border-title mb10">来电历史</p>
					<div class="info-form">
						<p class="form-item">
							<span class="form-label">来电次数</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">接通次数</span>
							{{ formData.phoneNo }}
						</p>
						<p class="form-item">
							<span class="form-label">回拨次数</span>
							{{ formData.phoneNo }}
						</p>
					</div>
				</el-card>
				<el-card shadow="never" class="mt20">
					<p class="border-title mb10">关注诉求</p>
					<div class="tag-list">
						<el-tag v-for="tag in formData.tags" effect="dark" :key="tag">{{ tag }}</el-tag>
					</div>
				</el-card>
			</el-col>
			<el-col :span="24" class="mt20">
				<el-card shadow="never">
					<p class="border-title mb10">市民标签</p>
          <div class="tag-list">
            <el-tag v-for="tag in formData.tags" effect="dark" :key="tag">{{ tag }}</el-tag>
          </div>
          <div class="flex-center-align mt20">
            <el-input v-model="input" placeholder="请输入标签内容" clearable show-word-limit maxlength="20" @keyup.enter="addTag"/>
            <el-button type="primary" @click="addTag" class="ml10">添加标签</el-button>
          </div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script setup lang="ts" name="orderAcceptCitizenPortrait">
import {reactive, ref} from 'vue';
import {ElMessage} from "element-plus";

const formData = reactive({
	phoneNo: '12345678901',
	tags: [
		'城市管理',
		'工地噪音',
		'市政供电',
		'网络游戏违法信息',
    '市政供电/临时电'
	],
});
const input = ref('');
const addTag = () => {
  if(!input.value){
    ElMessage.warning('请输入标签内容');
    return;
  }
  if(input.value){
    formData.tags.push(input.value);
    input.value = '';
  }
};
</script>

<style scoped lang="scss">
.order-accept-citizen-portrait {
	.el-card {
		background-color: var(--el-color-info-light-9);
		.info-form {
			.form-item {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				text-align: left;
				.form-label {
					width: 70px;
					text-align: right;
					margin-right: 10px;
				}
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
    .citizen-title{
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
    .citizen-img-box{
      img{
        width: 100%;
      }
    }
    .tag-list{
      margin-top: 20px;
      .el-tag{
        margin:0 10px 10px 0;
        &:last-child{
          margin:0 0 10px 0;
        }
      }
    }
	}
}
</style>
